Form Mastery - HTML5 Mastery: Semantics, Standards, and Styling - page 171

Figure 4-29. A fieldset with a legend

The last form element to mention, label , also increases both usability and access-
ibility. This element is used to form an association between a textual label and a form
control. When the label and form control are associated with each other, either can be
clicked to interact with the control. For example, a label associated with a check box
means that the label can be clicked, which will then select the box. There are two ways
of creating clickable labels like this in the markup. The first—and preferable—way is
by enclosing the form control within a label . Here is an example:
<label>Favorite cheese: <input type="text" name="ch"

/></label>
In the preceding example, clicking the “Favorite cheese:" text in the label causes the
nested input to gain focus, which in this case means the user could start typing in the
text field. An alternative solution is to use the for attribute:
<label for="favcheese">Favorite cheese: </label> <input
type="text" id="favcheese" name="ch" />
The advantage of using the for attribute is that the form control does not need to ap-
pear inside the label . The value in the for attribute is the ID of the associated form
control, which means the two are associated, even if they are located in separate spots
in the markup. This is potentially useful; however, because of this manual pairing of at-
tributes, using the for attribute can be laborious. I don't recommend using it unless you
absolutely must. A use case is in situations where a form appears inside a table and the
labels appear in one column and the form controls in another column.

Note Remember that tables are used for arranging tabular data in rows and columns
only and should not be used for layout; this includes using a table for the sole purpose
of aesthetically laying out a form! Use CSS instead for this purpose.

Putting it all together

Remember the City Press ? The fictional newspaper website from the previous chapter?
Let's look at a form for the site for gathering news tips so we can see all these form con-
trols coming together.

Page 1, gathering user details

The form is broken into two pages, the first for registering the tipster on the site and the
second for recording the new tip they have. The form's first page looks like Figure 4-30 .