Tab-friendly Forms

Use the "tabindex" attribute to make forms user-friendly.

For people who use the tab key for navigating from one form field to another, a random or unexpected tab order can be frustrating.

The tab key can navigate all visible form fields, including radio buttons, checkboxes, and selection lists.

Without the tabindex attribute, the tabbing order is the order of the visible form fields in the source code. This includes radio buttons and dropdown lists. (If the tabindex attribute is used elsewhere on the page it is likely to interfere with the tab order of the form.)

To control the tab order, use the tabindex attribute. The attribute can also be used to prevent fields from being tabbed into.

The tabindex attribute can even be used to specify a tab order spanning two or more forms.

Specifying a Tab Order

Below is an example of the tabindex attribute being used to control the tab order.

The source code order is:

• The name field.
• The checkbox.
• The email field.
• The submit button.

The tabindex attribute is used to change the tab order to:

• The name field.
• The email field.
• The checkbox.
• The submit button.

Click the name field then press the tab key three times, noticing where the cursor goes after each tab press.

Note: The tabindex attribute values can't be repeated for the live examples without interfering with each other. It means continuing to press the tab key will move the cursor to the next example.

Here is the source code for the above example:

<div style="border:1px solid black; padding:10px; width:205px;">
<form onsubmit="return false;">
<table border="0" cellpadding="0" cellspacing="5">
<tr>
<td>Name</td>
   <td><input tabindex="1" type="text" name="name" style="width:145px;"></td>
</tr><tr>
<td> </td>
   <td><input tabindex="3" type="checkbox" name="good_to_go">Good to go!</td>
</tr><tr>
<td>Email</td>
   <td><input tabindex="2" type="text" name="name" style="width:145px;"></td>
</tr><tr>
<td> </td>
   <td><input tabindex="4" type="submit" value="Let's get started." style="width:151px;"></td>
</tr>
</table>
</form>
</div>

The tabindex attributes and their values in the source code are blue.

Preventing a Field from Being Tabbed Into

To prevent a field from being tabbed into, specify a value of -1 for the tabindex attribute. The tabindex="-1" attribute may be specified in more than one field.

This example prevents the checkbox field from being tabbed into. Click the name field then press the tab key twice, noticing where the cursor goes after each tab press.

Below is source code to replicate the above example.

<div style="border:1px solid black; padding:10px; width:205px;">
<form onsubmit="return false;">
<table border="0" cellpadding="0" cellspacing="5">
<tr>
<td>Name</td>
   <td><input tabindex="1" type="text" name="name" style="width:145px;"></td>
</tr><tr>
<td> </td>
   <td><input tabindex="-1" type="checkbox" name="good_to_go">Good to go!</td>
</tr><tr>
<td>Email</td>
   <td><input tabindex="2" type="text" name="name" style="width:145px;"></td>
</tr><tr>
<td> </td>
   <td><input tabindex="3" type="submit" value="Let's get started." style="width:151px;"></td>
</tr>
</table>
</form>
</div>

The tabindex attributes and their values in the source code are blue.

A Tab Order Spanning Two Forms

Using the tabindex attribute, the tab order for these two forms is specified as:

1. Left form, name field.
2. Right form, name field.
3. Left form, email field.
4. Right form, email field.
5. Left form, checkbox.
6. Right form, checkbox.
7. Left form, submit button.
8. Right form, submit button.

Click the name field of the left form then press the tab key seven times, noticing where the cursor goes after each tab press. (If these two forms were the only forms on the page, you could simply tab to begin instead of clicking)

Here is source code to replicate the above example.

<div style="float:left; border:1px solid black; padding:10px; width:205px;">
<form onsubmit="return false;">
<table border="0" cellpadding="0" cellspacing="5">
<tr>
<td>Name</td>
   <td><input tabindex="1" type="text" name="name" style="width:145px;"></td>
</tr><tr>
<td> </td>
   <td><input tabindex="3" type="checkbox" name="good_to_go">Good to go!</td>
</tr><tr>
<td>Email</td>
   <td><input tabindex="5" type="text" name="name" style="width:145px;"></td>
</tr><tr>
<td> </td>
   <td><input tabindex="7" type="submit" value="Let's get started." style="width:151px;"></td>
</tr>
</table>
</form>
</div>

<div style="float:right; border:1px solid black; padding:10px; width:205px;">
<form onsubmit="return false;">
<table border="0" cellpadding="0" cellspacing="5">
<tr>
<td>Name</td>
   <td><input tabindex="2" type="text" name="name" style="width:145px;"></td>
</tr><tr>
<td> </td>
   <td><input tabindex="4" type="checkbox" name="good_to_go">Good to go!</td>
</tr><tr>
<td>Email</td>
   <td><input tabindex="6" type="text" name="name" style="width:145px;"></td>
</tr><tr>
<td> </td>
   <td><input tabindex="8" type="submit" value="Let's get started." style="width:151px;"></td>
</tr>
</table>
</form>
</div>

<div style="clear:both;"></div>

As in the other examples, the tabindex attributes and their values in the source code are blue.

Use the tabindex attribute to make your forms user friendly. People who use the tab key for navigating form fields will appreciate it.

Will Bontrager