Skip to content

Technique H71:Providing a description for groups of form controls using fieldset and legend elements

About this Technique

This technique relates to:

This technique applies to HTML.

Description

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 nesting 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 fieldset and legend elements is not required. H44 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 legend.

Examples

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 (input type="radio"). The radio buttons are contained within a fieldset. The test question is tagged with the legend element. Each field has the same name attribute, indicating these radio buttons are related, and should be grouped as shown. Also note that while the name attributes have the same value, the id attributes' values must be unique.

<fieldset>
  <legend>The play <cite>Hamlet</cite> was written by:</legend>
  <div>
    <input checked="checked" id="shakesp" name="hamlet" type="radio" value="a">
    <label for="shakesp">William Shakespeare</label>
  </div>
  <div>
    <input id="austen" name="hamlet" type="radio" value="b">
    <label for="austen">Jane Austen</label>
  </div>
  <div>    
    <input id="gbshaw" name="hamlet" type="radio" value="c">
    <label for="gbshaw">George Bernard Shaw</label>
  </div>
  <div>
    <input id="woolf" name="hamlet" type="radio" value="d">
    <label for="woolf">Virginia Woolf</label>
  </div>
  <div>
    <input id="dickens" name="hamlet" type="radio" value="e">
    <label for="dickens">Charles Dickens</label>
  </div>
</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 (input type="checkbox") has a 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>
  <div>
    <input id="photo" name="interests" type="checkbox" value="ph">
    <label for="photo">Photography</label>
  </div>
  <div>    
    <input checked="checked" id="watercol" name="interests" type="checkbox" value="wa">
    <label for="watercol">Watercolor</label>
  </div>
  <div>  
    <input checked="checked" id="acrylic" name="interests" type="checkbox" value="ac">
    <label for="acrylic">Acrylic</label>
  </div>
</fieldset>

Related Resources

No endorsement implied.

Tests

Procedure

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:

  1. Check that the group of logically related input or select elements are contained within fieldset elements.
  2. Check that each fieldset has a legend element that is the first child in the fieldset and includes a description for that group.

Expected Results

  • All of the checks are true.
Back to Top