Web Forms - tabindex Attribute (Page 5 of 9 )
The fabulous tabindex
A feature that we can easily add to our form is the tabindex attribute. Adding tabindex, and a numerical value, enables users to navigate the focus of form controls with the key board (typically using the TAB key). Repeatedly hitting the TAB key will change the focus to the next form control, in an order that we can specify. By default, every interactive element has an implied “tab order,” but using the tabindex attribute takes that ordering away from the browser, putting you in full control.
For instance, let’s add the tabindex attribute to the form controls in our example (Method C): <form action="/path/to/script" id="thisform" method="post">
Now, when the user tabs through the form, we’ll be ensuring the focus of the cursor follows the exact order we intended: Name:, Email:, Remember this info?, and the submit button. Using tabindex to set focus order becomes even more useful for complex forms and those where there might be multiple input boxes or other form controls for a single label.
Why tabindex?
Aside from being dead-simple to implement on our form, we’ll again be helping mobility-impaired users by letting them navigate the form entirely with the keyboard. Rather than grabbing the mouse to enter each form item, the user will be able to tab through each control, in the correct order. Think about those who, for whatever reason, are unable to use both hands to navigate the Web. This will help.
accesskey for frequented forms Similar to tabindex, the accesskey attribute is another easily added feature that can be useful for mobility-impaired users—and just darn convenient for others.
For instance, if we add the accesskey attribute to the tag that surrounds the Name: text of our form, when the user presses the key we specify, the focus of the cursor will change to the field that’s associated with the label.
Let’s take a look at the code that’ll make this happen:
<form action="/path/to/script" id="thisform" method="post">
Depending on the system, the user will either use the ALTor CTRL key in conjunction with the 9 key that we’ve specified in the markup. Focus will immediately shift to the Name: field in our form.
Easily accessed search Adding the accesskey attribute can be especially helpful when used on frequently used forms such as a search box or membership login. Without having to reach for the mouse, users can instantly change focus and start their query or input using only the keyboard.
Web Standards Solutions: The Markup and Style Handbook , by Dan Cederholm (Apress, 2004, ISBN: 1590593812). Check it out at your favorite bookstore today.
Buy this book now .
Next: Styling Forms >>
More Web Standards Articles More By Apress Publishing
/ 45 
