HTML and XHTML
This technique relates to:
The objective of this technique is to provide a semantic grouping for related form controls. This allows users to understand the relationship of the controls and interact with the form more quickly and effectively.
Form controls can be grouped by enclosing them within the
fieldset element. All controls within a given
fieldset are then related. The first element inside the
fieldset must be a
legend element, which provides a label or description for the group. Authors should avoid
fieldsets unnecessarily, as this can lead to confusion.
Grouping controls is most important for related radio buttons and checkboxes. A set
of radio buttons or checkboxes is related when they all submit values for a single
named field. They work in the same way as selection lists, allowing the user to choose
from a set of options, except selection lists are single controls while radio buttons
and checkboxes are multiple controls. The individual label associated with each radio
or checkbox control may not fully convey the group's descriptive context. In this
situation, it is essential that they be grouped together semantically to facilitate
being treated as a single control, as well as to provide an additional group level
description. Often, user agents will present the value of the
legend before the label of each control to provide this description, as well as to remind
users that they are part of the same group.
It can also be useful to group other sets of controls less tightly related than radio buttons and checkboxes. For instance, several fields that collect a user's address might be grouped together with a legend of "Address", thus providing a group level description for these controls. As a rule of thumb, it can be said that where a group of controls within a larger form requires an additional heading to provide a description specific to that particular group, the use of fieldset and legend elements is appropriate.
However, when a group of related radio buttons or checkboxes (even having values for
a single named field) includes clear instructions and distinct selections (i.e. where
the individual label associated with each particular control provides a sufficient
description), the use of the
legend elements is not required.
is sufficient in this case.
Authors sometimes avoid using the
fieldset element because of the default display in the browser, which draws a border around
the grouped controls. This visual grouping is also useful and authors should seriously
consider retaining it (or some form of visual grouping). The visual effect can be
modified in CSS by overriding the "border" property of the
fieldset and the "position" property of the
Example 1: A multiple choice test
This example shows a test item with one question and five possible answers. Each
answer is represented by a radio button (
type="radio"). The radio
buttons are contained within a
fieldset. The test question is tagged
<fieldset> <legend>The play <cite>Hamlet</cite> was written by:</legend> <input type="radio" id="shakesp" name="hamlet" checked="checked" value="a"> <label for="shakesp">William Shakespeare</label><br /> <input type="radio" id="kipling" name="hamlet" value="b"> <label for="kipling">Rudyard Kipling</label><br /> <input type="radio" id="gbshaw" name="hamlet" value="c"> <label for="gbshaw">George Bernard Shaw</label><br /> <input type="radio" id="hem" name="hamlet" value="d"> <label for="hem">Ernest Hemingway</label><br /> <input type="radio" id="dickens" name="hamlet" value="e"> <label for="dickens">Charles Dickens</label> </fieldset>
Example 2: A set of checkboxes
The User Profile page for a Web site allows users to indicate their interests by
selecting multiple checkboxes. Each checkbox (
label. The checkboxes are contained within a
fieldset, and the
legend element contains the prompt for
the entire group of checkboxes.
<fieldset> <legend>I am interested in the following (check all that apply):</legend> <input type="checkbox" id="photo" name="interests" value="ph"> <label for="photo">Photography</label><br /> <input type="checkbox" id="watercol" name="interests" checked="checked" value="wa"> <label for="watercol">Watercolor</label><br /> <input type="checkbox" id="acrylic" name="interests" checked="checked" value="ac"> <label for="acrylic">Acrylic</label> … </fieldset>
Resources are for information purposes only, no endorsement implied.
For groups of related controls where the individual labels for each control do not provide a sufficient description, and an additional group level description is needed,
- Check that the group of logically related
selectelements are contained within
- Check that each
legendelement that includes a description for that group.
- All of the above checks are true.