Form Trick: Set the Tabbing Order

Tab indexing is an accessibility feature. It allows people to move from one form element to the next by pressing the Tab key on their keyboard. A webmaster can set the order of the tabbing index, in other words, you can decide which form element the focus goes to next. Click inside box 1 and then press your tab key a few times. Pressing the Tab key on your keyboard should have caused the cursor to jump to box 2, pressing tab again should jump it to box 6, then 4, then 5, then 3. If you keep going, the cursor will then jump to red, then blue is skipped and it jumps to green, then lastly to purple. That's the tabbing order I set, although for the color name radio buttons it doesn't actually cause the button to be checked, it just places the focus around the radio button.

How to Set the Tabby Tab Tab

The code below shows you how to set the tab index order:

<input type="text" name="First Name" size="20" tabindex="1">
<input type="text" name="Last Name"  size="20" tabindex="2">

It's that easy. Just add the "tabindex" code to your standard form elements and set the order as the value. If you don't specify a tab order, tabbing will go to each field in the order you code them into your form, which isn't always the most logical order of progression.

You can also set a negative value for the tab index so that a field is skipped over in the tabbing process as I did for the blue radio button.

<input type="radio" name="blue" tabindex="-1">
<input type="radio" name="gray" tabindex="-2">

The -1, -2 will make those fields be bypassed when tabbing. You'd normally skip over things like radio buttons and checkboxes since tabbing to them doesn't check or uncheck the input field, and omit the form Reset button to prevent a user from accidently resetting the form and losing all their input.

Back | Web Design Tutorials Index

Almost a Newsletter

Changing list hosts. Will post a new subscribe form shortly.

Did you know...

The member's site has about 100 standards compliant HTML and CSS tutorials, 31 handy reference charts, reprintable content, web graphics, exclusive fonts, free software, free ebooks and more? All this for less than 9 cents a day! [ Details ]