HTML Form Navigation

Posted in Observations,Tech,Things I hate — by Don on 03/13/09

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.

via

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=1

to 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.