# Providing a description for groups of form controls using `fieldset` and `legend` elements

ID: H71

Technology: html

Type: Technique

## When to Use

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 `fieldset`s 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

### 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>

### 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>

### Logically related controls

In this example, form fields for residential and postal addresses are distinguished by the value of the `legend` in each `fieldset` grouping.

    <form action="/adduser" method="post">
      <fieldset>
        <legend>Your Residential Address</legend>
        <div>
          <label for="raddress">Address:</label>
          <input autocomplete="street-address" id="raddress" name="raddress" type="text">
        </div>
        <div>
          <label for="rzip">Postal/Zip Code:</label>
          <input autocomplete="postal-code" id="rzip" name="rzip" type="text">
        </div>
      </fieldset>
      <fieldset>
        <legend>Your Postal Address</legend>
        <div>
          <label for="paddress">Address:</label>
          <input autocomplete="street-address" id="paddress" name="paddress" type="text">
        </div>
        <div>
          <label for="pzip">Postal/Zip Code:</label>
          <input autocomplete="postal-code" id="pzip" name="pzip" type="text">
        </div>
      </fieldset>
    </form>

## 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.

## Related Techniques

- H44
- H65

## Resources

- HTML - the `fieldset` element.
- HTML - the `legend` element.