Grouping Controls with fieldset and legend

A long form is easier to complete when its fields are grouped by purpose. The fieldset element groups related controls, and legend provides the group’s caption.

<fieldset>
  <legend>Delivery address</legend>
  <label for="street">Street address</label>
  <input id="street" name="street" autocomplete="street-address">
  <label for="city">City</label>
  <input id="city" name="city" autocomplete="address-level2">
</fieldset>

A fieldset can group a radio question, several checkboxes, or related preferences. The legend is announced as part of the group’s context by many screen readers.

Do not wrap every single field in its own fieldset. Use a fieldset when the controls belong together and benefit from a shared label. For a simple text field, a label is enough.

The disabled attribute on a fieldset disables its descendant controls, with a special exception for controls inside its first legend. Explain why a group is disabled so visitors are not left guessing.