Producing web pages
* HTML CSS DHTML XHTML A to Z of tags        Accessibility          Design

Setting up the tab order

Once upon a time, we used the keyboard to move round the screens not a mouse. In fact, you can still use the tab key to move between fields in a form. The fields have a tabbing order. If you don't bother to set this up, the default is the order in which you create the form elements. Not very helpful.

To set up the order, use the tabindex attribute.

<form>
<p>Would you like more information on?:<p>
<input type="checkbox" tabindex="1" value="0">
Hotels and B&Bs<br>
<input type="checkbox" tabindex="2" value="1">
Restaurants<br>
<input type="checkbox" tabindex="3" value="2">
Activites<br>
<input type="checkbox" tabindex="4" value="3" checked>
Absolutely everything</p>
</input>
</form>

When the browser displays the form, the focus is on the element with a tabindex of 1. Press the tab key to shift to the second field and so on. To remove a field from the tabbing order, set the tabindex attribute to zero.

This attribute works with HTML 4.0. Earlier versions of Internet Explorer (and this is a surprise) work differently. They use the taborder attribute instead (notab takes a field out of the tabbing order) but it works in the same way.