ptg16476052352 LESSON 12: Designing Forms
should number your form fields sequentially to set the order that the browser will use
when the user tabs through them. Here’s an example:
<p>
<label>Enter your <a href="#">name</a>
<input type="text" name="username" tabindex="1">
</label>
</p>
<p>
<label>Enter your <a href="#">age</a>
<input type="text" name="age" tabindex="2">
</label>
</p>
<p>
<input type="submit" tabindex="3">
</p>When you tab through this page, the browser will skip past the links and move directly to
the form fields.Using Access Keys
Access keys also make your forms easier to navigate. They assign a character to an ele-
ment that moves the focus to that element when the user presses a key. To add an access
key to a check box, use the following code:
<p>What are your interests?</p>
<label>Sports <input type="checkbox" name="sports" accesskey="S"></label>
<label>Music <input type="checkbox" name="music" accesskey="M"></label>
<label>Television <input type="checkbox" name="tv" accesskey="T"></label>Most browsers require you to hold down a modifier key and the key specified using
accesskey to select the field. On Windows, both Firefox and Internet Explorer require
you to use the Alt key along with the access key to select a field. Access keys are mostly
useful for forms that will be used frequently by the same users. A user who is going to
use a form only once won’t bother to learn the access keys, but if you’ve written a form
for data entry, the people who use it hundreds of times a day might really appreciate the
shortcuts.Creating disabled and readonly Controls
Sometimes you might want to display a form control without enabling your visitors to
use the control or enter new information. To disable a control, add the disabled attribute
to the form control:
<label for="question42">What is the meaning of life?</label>
<textarea id="question42" disabled>