Fieldset

Misunderstood and much maligned, the fieldset is a great tool for accessibility and logical form layout.

Basically, a fieldset is a way of grouping together a number of fields to indicate that they are related. The relationship might be as tight as a group of radio buttons or checkboxes, or it might be a whole section such as ‘Contact Details’.

Fieldsets may be nested so that within ‘Contact Details’, there might be ‘Home’ and ‘Work’ fieldsets.

The code for fieldset couldn’t be simpler.

<fieldset></fieldset>

Attributes, such as id and class may be added for styling.

Although not mandatory in XHTML 1.0 Transitional, fieldsets should contain a legend tag.

Typical use of a fieldset.

<fieldset class="answer">
  <legend>A radio array:</legend>
  <label for="q8a"><input type="radio" name="q8" id="q8a" value="Unique option 1" />Unique option 1</label>
  <label for="q8b"><input type="radio" name="q8" id="q8b" value="Unique option 2" />Unique option 2</label>
  <label for="q8c"><input type="radio" name="q8" id="q8c" value="Unique option 3" />Unique option 3</label>
</fieldset>

Note that the code inside these fieldset samples may not have some styling hooks necessary for the recommended style sheet. See the pages for the individual element types for full samples.

• text field
• radio buttons

Fieldset can be used as a container to validate form fields. All fields inside this fieldset would be automatically validated.

The two items added are the required class and the nested span with a class of required-flag.

<fieldset class="answer required">
  <legend>A radio array <span class="required-flag">(required)</span>:</legend>
  ...
</fieldset>

More information on the form validation javascript.

• Legend