Chapter 73. Working with Labels

In the spirit of good markup and to satisfy the standards police like the World Wide Web Consortium (W3C), you may be wondering how to mark up the labels of your form. The widgets have their own tags, so no worries there. And you probably lay out your form in a table structure, which has its own set of tags. But what about the text inside the form that describes what your visitors should type into the fields? In other words, what about the labels?

You might be tempted to use the familiar text tags for the job, like paragraph tags or some species of heading. The problem is, your tags should accurately identify the type of elements they mark up. A label in a form isn't really a paragraph. It isn't a heading, either, in the sense that HTML defines a heading rather strictly as a headline or marker for a section of the page.

This conundrum isn't nearly as difficult as such a dramatic lead-in implies. HTML provides a little-known text tag especially for form labels: the label tag, conveniently enough. See it in action in Figure 73.1.

Figure 73.1. This form uses label tags to mark up the text labels of the checkboxes.

GEEKSPEAK

A label in a form is a piece of text that describes what the visitor should type into the corresponding field.

Listing 73.1. View Source for Figure 73.1.

 <form>   <table>     <tr>       <td><label>         <input type="checkbox" name="news" value="yes">         News</label></td>     </tr>     <tr>       <td><label>         <input type="checkbox" name="sports" value="yes">         Sports</label></td>     </tr>     <tr>       <td><label>         <input type="checkbox" name="business" value="yes">         Business</label></td>     </tr>     <tr>       <td><label>         <input type="checkbox" name="entertainment" value="yes">         Entertainment</label></td>     </tr>     <tr>       <td><label>         <input type="checkbox" name="humor" value="yes">         Humor</label></td>     </tr>   </table> </form> 

As you can see, the browser doesn't render labels in any special style. The labels look like ordinary text. Why bother with the extra markup? There are at least three good reasons.

First, the more accurate your markup, the more accessible your Web page becomes. If you have something on the page that you can identify as a label, you should mark it up as such. This way, when someone visits your site with nonstandard browsing equipment such as a screen reader or text-to-speech converter, your site translates more accurately.

Second, when you use label tags, your markup spells out the precise relationships of the elements in the form. You create a connection between the text and the widget that doesn't exist otherwise. Sure, for those with perfect vision, it's clear to see which piece of text corresponds to which label. But having the relationships spelled out goes a long way toward making your work intelligible to those who don't have the benefit of a visual display.

TIP

When you nest the widget tag inside its label tag, the widget inherits whatever CSS styles you apply to the label. If you don't want this to happen, don't nest the widget inside the label. Keep their markup separate, and use the id and for attributes to create the association between them.

Third, you can whip up a CSS style for label tags and create a custom appearance for these elements. You don't need to create a special class of paragraph or heading.

End of commercial. Notice that the label tag nests the input tag of its checkbox:

 <label>   <input type="checkbox" name="humor" value="yes">   Humor </label> 

This is one way for the browser to associate the label with its widget. But what if your labels and widgets appear in different columns of a table, like this:

 <form>   <table>     <tr>       <td><input type="checkbox" name="humor" value="yes"></td>       <td>Humor</td>     </tr>   </table> </form> 

This markup makes it impossible for you to nest the input tag inside the label tag, since you have a couple of table-cell tags in the way. In cases like these, the label tag goes around the text. Then, to create the association between the elements, use a pair of attributes instead: the id attribute and the for attribute:

 <form>   <table>     <tr>       <td>         <input type="checkbox" name="humor"  value="yes">       </td>       <td>         <label for="humor">Humor</label>       </td>     </tr>   </table> </form> 

TIP

Use unique IDs for each element on your page. Don't give the same ID to two or more elements.