There are many instances in which it is a good idea to group fields together. For example, if you use three text fields to collect telephone numbers in separate area code, prefix, and suffix fields they should be grouped together. The two tags used for this purpose are fieldset and legend.Not only do these tags make groups of fields more accessible but they also make great visual aids for your forms.
Here is the code for the above:
<fieldset>
<legend>Telephone Number</legend>
<p>
<label for="areacode">Area Code</label>:<input id="areacode" type="text" name="areacode" size="3" />
<label for="prefix">Prefix</label>:<input id="prefix" type="text" name="prefix" size="3" />
<label for="suffix">Suffix</label>:<input id="suffix" type="text" name="suffix" size="4" />
</p>
</fieldset>
The code:
<fieldset>
<legend>Select your favorite sports</legend>
<input id="baseball" type="checkbox" name="favorite_sports" value="baseball" />
<label for="baseball">Baseball</label><br />
<input id="basketball" type="checkbox" name="favorite_sports" value="basketball" />
<label for="basketball">Basketball</label><br />
<input id="football" type="checkbox" name="favorite_sports" value="football" />
<label for="football">Football</label><br />
<input id="curling" type="checkbox" name="favorite_sports" value="curling" />
<label for="curling">Curling</label>
</fieldset>
The code:
<fieldset>
<legend>Select your class standing</legend>
<input id="Freshman" type="radio" name="class_standing" value="Freshman" />
<label for="Freshman">Freshman</label> |
<input id="Sophomore" type="radio" name="class_standing" value="Sophomore" />
<label for="Sophomore">Sophomore</label> |
<input id="Junior" type="radio" name="class_standing" value="Junior" />
<label for="Junior">Junior</label> |
<input id="Senior" type="radio" name="class_standing" value="Senior" />
<label for="Senior">Senior</label> |
<input id="Graduate" type="radio" name="class_standing" value="Graduate" />
<label for="Graduate">Graduate</label>
</fieldset>
The code:
<fieldset>
<legend>Name and Status</legend>
<p>
<label for="areacode">First Name</label>:<input id="areacode" type="text" name="firstname" size="12" />
<label for="suffix">Last Name</label>:<input id="suffix" type="text" name="lastname" size="24" />
</p>
<p>
<input id="Student" type="radio" name="status" value="Student" />
<label for="Student">Student</label> |
<input id="Faculty" type="radio" name="status" value="Faculty" />
<label for="Faculty">Faculty</label> |
<input id="Staff" type="radio" name="status" value="Staff" />
<label for="Staff">Staff</label>
</p>
</fieldset>
Say you want to use one label for all fields to conserve space. Because that would remove the natural text prompts you would want another way to provide the needed accessibility cues. This can be accomplished using CSS styles to hide the labels, while providing a text prompt for visual users:
Here is the code for the above:
<fieldset>
<legend>Full Name</legend>
<p>Enter your first, middle, and last names below:</p>
<p>
<label class="hidden" for="first_name">First Name</label><input id="first_name" type="text" name="first_name" />
<label class="hidden" for="middle_name">Middle Name</label><input id="middle_name" type="text" name="middle_name" />
<label class="hidden" for="last_name">Last Name</label><input id="last_name" type="text" name="last_name" />
</p>
</fieldset>
…and the CSS:
.hidden {
display:none;
}
