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

Applicability

HTML

This technique relates to:

• 1.3.1: Info and Relationships (Sufficient when used with Making information and relationships conveyed through presentation programmatically determinable using the following techniques: )
• 3.3.2: Labels or Instructions (Sufficient)

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

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

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

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

Other sources

No endorsement implied.

• HTML - the fieldset element.
• HTML - the legend element.

Related Techniques

• H44
• H65

Tests