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.
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 ) .
Click here to view code image
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
boxes (see Figure 10.17 ) . Doing so allows omission of the for and id attributes.
Click here to view code image
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