You've created all the form controls that will accept user input. Now it's time to add functionality and make the controls a bit friendlier.
Displaying Control label Elements
The label element displays helpful information for a form control. You should tie the for attribute to the control it labels. To create a label, begin with the opening label tag and then enter the for attribute. The value for this attribute, when present, must match the id attribute for the control it's labeling. Next, enter text that will serve as the label and then close the element with the end label tag, as in the following:
<label for="control4">Who is your favorite NFL Quarterback?</label> <input type="text" name="favqb" />
Figure 10.16 shows this text control with a label assigned to it.
Figure 10.16. You can assign labels to any form control. Note that they're displayed with the control.
If you define your form control within the label element, as shown in the following code, you can omit the for attribute:
<label>User name: <input type="text" name="username" /></label>
The <label> tag doesn't cause any visible changes to the page, but you can always apply styles to it if you want.
Grouping Controls with fieldset and legend
The fieldset element organizes form controls into groupings that appear in the web browser. The legend element displays a caption for the fieldset. To create a fieldset element, start with the opening fieldset tag, followed by the legend element.
Next, enter your form controls and finish things off with the closing fieldset tag:
<fieldset> <legend>Oatmeal Varieties</legend> <label>Apple Cinnamon<input type="radio" name="applecinnamon" /> </label><br /> <label>Nutty Crunch<input type="radio" name="nuttycrunch" /> </label><br /> <label>Brown Sugar<input type="radio" name="brownsugar" /></label> </fieldset>
Figure 10.17 shows the result.
Figure 10.17. The fieldset and legend elements enable you to organize your forms.
Changing the Default Form Navigation
In most browsers, you can use the Tab key to step through the form fields and links on a page. When filling out long forms, it's often much easier to use the Tab key to move from one field to the next than to use the mouse to change fields. If you have a mix of form fields and links on your page, setting things up so that using Tab skips past the links and moves directly from one form field to the next can improve the usability of your applications greatly. To set the tab order for your page, use the tabindex attribute. You 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>Enter your <a href="/">name</a>: <input type="text" name="username" tabindex="1" /></p> <p>Enter your <a href="/">age</a>: <input type="text" name="age" tabindex="2" /></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 element 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> <p>Sports <input type="checkbox" name="sports" accesskey="S" /></p> <p>Music <input type=""checkbox" name="music" accesskey="M" /></p> <p>Television <input type=""checkbox" name="tv" accesskey="T" /></p>
Most browsers require you to hold down a modifier key and the key specified using accesskey to select the field. On Windows, both Netscape 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:
<p>What is the meaning of life? <textarea name="question42" disabled="disabled"> Enter your answer here. </textarea> </p>
When displayed in a web browser, the control will be dimmed (a light shade of gray) to indicate that it's unavailable.
To create a read-only control, use the readonly attribute:
<p>This month: <input type="text" name="month" value="September" readonly="readonly" /></p>
The read-only control is not distinguished in any way from a normal form control. However, when visitors attempt to enter new information (or, in the case of buttons or check boxes, select them), they'll find that they cannot change the value. Figure 10.18 shows both a disabled control and a read-only control. You'll generally find disabled to be more useful because it's less confusing to your users.
Figure 10.18. Disabled controls are dimmed. Readonly controls appear normallythey just can't be changed.