HTML and CSS Reference
In-Depth Information
Organizing Form Elements
Knowing how to capture data with inputs is half the battle. Organizing form elements and
controls in a usable manner is the other half. When interacting with forms, users need to
understand what is being asked of them and how to provide the requested information. By
using labels, fieldsets, and legends, we can better organize forms and guide users to prop-
erly complete them.
Label
Labels provide captions or headings for form controls, unambiguously tying them together
and creating an accessible form for all users and assistive technologies. Created using the
<label>
element, labels should include text that describes the inputs or controls they per-
tain to.
Labels may include a
for
attribute. The value of the
for
attribute should be the same as
the value of the
id
attribute on the form control the label corresponds to. Matching up the
for
and
id
attribute values ties the two elements together, allowing users to click on the
<label>
element to bring focus to the proper form control (see
Figure 10.16
)
.
1.
<label for="username">Username</label>
2.
<input type="text" name="username"
id="username"
>
Figure 10.16
A label and form control that are bound together
If desired, the
<label>
element may wrap form controls, such as radio buttons or check
1.
<label>
2.
<input type="radio" name="day" value="Friday" checked> Friday
3.
</label>
4.
<label>
5.
<input type="radio" name="day" value="Saturday"> Saturday
6.
</label>
7.
<label>
8.
<input type="radio" name="day" value="Sunday"> Sunday
9.
</label>
Search WWH ::
Custom Search