I’ve been having issues with HTML forms ever since I switched to the Mac.
On Windows browsers (pretty much all of them), when you press the tab key (insert ridiculous apple symbol here), you go from field to field. This includes stops at drop downs, radio buttons and check boxes. Without doing anything, it just works.
But not so on the Mac. When I tab through a form invariably it skips drop downs and radio buttons and check boxes. This is terribly annoying. I would guess it is because browsers on the Mac more closely follow HTML standards, but I’m not sure.
I have some experience designing forms. Forms in Word, in Excel, in MS Access, even in HTML. I am of the belief that when it comes time to use a form, the user should not have to take their hands off of the keyboard to navigate. Only to check a box or click a button. Everything should be handled with the tab key (or shift-tab for backward navigation). Every form I’ve ever created does this.
The way to get HTML forms to properly navigation is by using the TABINDEX attibute. According to the W3:
The following elements support the tabindex attribute: A, AREA, BUTTON, INPUT, OBJECT, SELECT, and TEXTAREA.
Just about every form element in HTML supports the TABINDEX attribute as you can see above. I think it might be something that not everyone is familiar with. It’s as simple as adding
tabindex=1to the form attribute. Using sequencial numbers will provide tab stops exactly where you want them. Especially handy if your form covers 2 columns or has many SELECT (drop down) boxes.
Forms are a big part of the user experience on the web. It’s a shame not all sites treat them as such and just cobble them together without fully checking how they navigate. Just a little something to think about.
Leave a Reply
Comment moderation in full effect!
All comments at donburnside.com are moderated by my first rate team of robot warriors, ready to do battle with all the nare-do-wells that stalk the interwebs!
Besides, it's only your first comment (per IP address if you are commenting from work and home) that the robot warriors have to approve. After that it should be clear saling! If not, contact db and I'm sure he'll hook you up.
Finally, for those of you in the know, Markdown is available as it a very small set of HTML tags. If you are scratching your head, don't worry, it's just geek stuff. You can still comment!
Thanks for stopping by!
