Skip to Local Navigation
Skip to Content
California State University, Long Beach
Web Comm, California State University, Long Beach
Print this pageAdd this page to your favoritesSelect a font sizeSelect a small fontSelect a medium fontSelect a large font
 

Web Accessibility: Forms

Legends & Field Sets

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.

Text Fields

Telephone Number

: : :

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>

Checkboxes

Select your favorite sports


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>

Radio Buttons

Select your class standing | | | |

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>

Combined Field Types

Name and Status

: :

| |

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>

Advanced Techniques

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:

Full Name

Enter your first, middle, and last names below:

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;

}

Next Section: Option Groups