Setting the Tab Order in a Form

By pressing the Tab key, visitors can move the focus through the fields in your form from top to bottom (and then select the desired one by pressing Return). Depending on your form's layout, you may prefer to set the tab order yourself so that the visitor fills out all the fields in a particular group before going on to the next group.

In the form element's tag, type tabindex="n", where n is the number that indicates the tab order.

Tips

Getting the focus means the form element is selected but not activated. Activation requires pressing the Return key (or a keyboard shortcutsee page 278).
The value for tabindex can be any number between 0 and 32767.
By default, the tab order depends on the order of the elements in the (X)HTML code. When you change the tab order, the lower numbered elements get the focus first, followed by higher numbered elements.
In a form, you can assign tab order to text fields, password fields, checkboxes, radio buttons, text areas, menus, and buttons.
You can also assign tab order to links (see page 113) and client-side image maps (see page 117).
OK, I cannot tell a lie. Where the first Tab keystroke lands you depends on your browser and how it's configured. On IE 7 it took me 9 tabs to get to the first one.

Figure 17.55. With forms on a page that begins with a link, you may want to change the tab order so that the first tab takes you to the first field, not the first link.

Setting the Tab Order in a Form

Figure 17.54. By setting the tabindex, you control the order in which your visitor can tab through the fields.

Figure 17.55. With forms on a page that begins with a link, you may want to change the tab order so that the first tab takes you to the first field, not the first link.

Figure 17.54. By setting the `tabindex`, you control the order in which your visitor can tab through the fields.