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.

TIP

You can also use the tabindex attribute in anchor tags for links.


By default, the browser chooses the order of the tab stops by the appearance of the corresponding tags in the HTML. However, when you lay out your form in a table, the browser might not understand the proper order of the widgets, since the widget tags don't always appear in the code in the logical sequence that they show up on screen.

To keep your form flowing naturally and logically when the visitor steps through it with the Tab key, you can specify the exact order of the widgets with their tabindex attributes.

Take the form in Figure 71.1. Its widgets don't use the tabindex attribute, leaving the browser to determine their correct tab order.

Figure 71.1. This form's widgets don't use the tabindex attribute. The browser determines their tab order.


TIP

If 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.
 <form>   <table>     <tr>       <td colspan="2"><strong>You</strong></td>       <td width="50" rowspan="4">&nbsp;</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> 

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">&nbsp;</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> 

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.

TIP

If 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.


FAQ

What happens when two or more tags have the same tabindex value?

The browser orders them according to which is closer to the top of the HTML code.




Web Design Garage
Web Design Garage
ISBN: 0131481991
EAN: 2147483647
Year: 2006
Pages: 202
Authors: Marc Campbell

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net