Chapter 71. Setting the Tab Order
Not everybody on the Web browses with a mouse. Some people can't because of physical disabilities. Others just prefer using the keyboard. As you may know, you can press the Tab key to step through the interactive elements on a page such as links and form widgets.
TIPYou can also use the tabindex attribute in anchor tags for links. |
Figure 71.1. This form's widgets don't use the tabindex attribute. The browser determines their tab order.
[View full size image]
TIPIf you set the tabindex attribute for one tag, set this attribute for all the widgets and links on your page. Otherwise, the browser might not get the order right. |
Listing 71.1. View Source for Figure 71.1.
If the browser determines the tab order for this form, it works its way from the top of the HTML listing to the bottom. So, it chooses the yourName field first, followed by the spouseName field, followed by the yourEmail field, followed by the spouseEmail field, and so on. But this isn't the best tab order for the form. It would be better if the visitor could fill out all the personal information first before moving on to the spouse.Enter the tabindex attribute:
<form>
<table>
<tr>
<td colspan="2"><strong>You</strong></td>
<td width="50" rowspan="4"> </td>
<td colspan="2"><strong>Your Spouse</strong></td>
</tr>
<tr>
<td>Name</td>
<td><input type="text" name="yourName"></td>
<td>Name</td>
<td><input type="text" name="spouseName"></td>
</tr>
<tr>
<td>Email address</td>
<td><input type="text" name="yourEmail"></td>
<td>Email address</td>
<td><input type="text" name="spouseEmail"></td>
</tr>
<tr>
<td>May we contact you?</td>
<td><input type="radio" name="contactYou" value="yes" checked>
Yes
<input type="radio" name="contactYou" value="no">
No</td>
<td>May we contact your spouse?</td>
<td><input type="radio" name="contactSpouse" value="yes" checked>
Yes
<input type="radio" name="contactSpouse" value="no">
No</td>
</tr>
</table>
</form>
Notice that each widget gets the tabindex attribute. The value of this attribute determines its place in the tab order, from lowest to highest. So, taking the tabindex values in turn, the form logically proceeds from yourName to yourEmail to contactYou yes to contactYou no, and then it jumps over to the spouse's column and hits the corresponding fields in the same order.
<form>
<table>
<tr>
<td colspan="2"><strong>You</strong></td>
<td width="50" rowspan="4"> </td>
<td colspan="2"><strong>Your Spouse</strong></td>
</tr>
<tr>
<td>Name</td>
<td><input type="text" name="yourName" tabindex="1"></td>
<td>Name</td>
<td><input type="text" name="spouseName" tabindex="5"></td>
</tr>
<tr>
<td>Email address</td>
<td><input type="text" name="yourEmail" tabindex="2"></td>
<td>Email address</td>
<td><input type="text" name="spouseEmail" tabindex="6"></td>
</tr>
<tr>
<td>May we contact you?</td>
<td><input type="radio" name="contactYou" value="yes" checked tabindex="3">
Yes
<input type="radio" name="contactYou" value="no" tabindex="4">
No</td>
<td>May we contact your spouse?</td>
<td><input type="radio" name="contactSpouse" value="yes" checked tabindex="7">
Yes
<input type="radio" name="contactSpouse" value="no" tabindex="8">
No</td>
</tr>
</table>
</form>
TIPIf you have more than one form on the same page, don't go back to tabindex="1" for the first widget in the next form. Pick up the counting where you left off. |
|