HTML and CSS Reference
In-Depth Information
Figure 10.17 Form controls nested within a given label, allowing the omission of the
for and id attributes
Fieldsets group form controls and labels into organized sections. Much like a <section>
or other structural element, the <fieldset> is a block-level element that wraps related
elements, specifically within a <form> element, for better organization (see Figure
10.18 ) . Fieldsets, by default, also include a border outline, which can be modified using
Click here to view code image
1. <fieldset>
2. <label>
3. Username
4. <input type="text" name="username">
5. </label>
6. <label>
7. Password
8. <input type="text" name="password">
9. </label>
10. </fieldset>
Figure 10.18 Form controls and labels organized within a <fieldset> element
A legend provides a caption, or heading, for the <fieldset> element. The <legend>
element wraps text describing the form controls that fall within the fieldset. The markup
should include the <legend> element directly after the opening <fieldset> tag. On
the page, the legend will appear within the top left part of the fieldset border (see Figure
10.19 ) .
Click here to view code image
1. <fieldset>
2. <legend>Login</legend>
3. <label>
4. Username
Search WWH ::

Custom Search