The TABINDEX Attribute

Most people navigate forms by using the mouse to select the field, box, or button, and using the keyboard to enter text. More savvy web surfers have noticed that you can move from one field to another using the keyboard's "TAB" key.

The TAB key will go from the currently selected field to the next field according to the order the fields are coded. This isn't always good. If you have a form laid out in columns, you may want the TAB key to follow a side-to-side order instead of the order the fields were coded in.

In Internet Explorer, this can be done by using the TABINDEX attribute. The TABINDEX attribute goes into the <input> tags and has a number that relates to the order you want the TAB key to focus your fields. Here's an example (IE only), use the mouse to focus on one box and the TAB key to change the focus.

Notice how tabbing moves the focus from side-to-side? This occurs even though the boxes were coded top-to-bottom. Here's the code without TABINDEX:

<form name="form1">
<table width="100%" cellspacing=0 cellpadding=5 border=0><tr>

<td width="50%" align="center">

Box 1:&nbsp;
<input type="text" size=10><br><br>
Box 3:&nbsp;
<input type="text" size=10><br><br>

</td>

<td width="50%" align="center">

Box 2:&nbsp;
<input type="text" size=10><br><br>
Box 4: &nbsp;
<input type="text" size=10><br><br>

</td>

</tr></table></form>

The default tabbing order of the above boxes would be 1-3-2-4. I want to change this to 1-2-3-4. I'll add TABINDEX to do this:

<form name="form1">
<table width="100%" cellspacing=0 cellpadding=5 border=0><tr>

<td width="50%" align="center">

Box 1:&nbsp;
<input type="text" size=10 tabindex=1><br><br>
Box 3:&nbsp;
<input type="text" size=10 tabindex=3><br><br>

</td>

<td width="50%" align="center">

Box 2:&nbsp;
<input type="text" size=10 tabindex=2><br><br>
Box 4: &nbsp;
<input type="text" size=10 tabindex=4><br><br>

</td>

</tr></table></form>

The TABINDEX attribute overrides the default tabbing scheme and causes the focus to move according the values in the TABINDEX attributes.

This has limitations. First, older Netscape doesn't support TABINDEX even though it claims to. Next, radio buttons throw the indexing off. Radio buttons are navigated by the cursor keys on the keyboard. The first radio button can be indexed and the rest can be ignored. The cursor keys will cycle through them by default.

Overall, TABINDEX comes in handy for only a few situations. Most form navigation problems are better handled by a sensible "top-to-bottom" layout.

Practice using TABINDEX by making a simple form in a table like above. Put in six or more boxes and add TABINDEX to the <input> tags. Play around with the values to make different navigation patterns.

To Next Advanced HTML Lesson

Back To Advanced HTML Index