Grouped and Differentiated Form Controls

Grouping form controls in a meaningful way can make them much easier to handle for everyone. While most controls can be grouped, some must be grouped. The fieldset/legend structure is available for exactly that – it can even be nested. And if its visual limitations are a problem, ARIA can be of help.

<fieldset>/<legend> structures are used for grouping form controls that are related in some way. While in complex forms they can be used to group all kinds of form controls, groups of radio buttons and checkboxes should always be grouped by them.

Another use case is differentiating groups with similar input fields, for example, to tell apart shipping and billing addresses.

Working Example

Billing address
Shipping address

Code

<form>
  <fieldset>
    <legend>Billing address</legend>
    <div class="control">
      <label for="billing_first_name">First name</label><input id="billing_first_name" type="text" />
    </div>
    <div class="control">
      <label for="billing_last_name">Last name</label><input id="billing_last_name" type="text" />
    </div>
    <div class="control">
      <label for="billing_street">Street</label><input id="billing_street" type="text" />
    </div>
    <div class="control">
      <label for="billing_city">City</label><input id="billing_city" type="text" />
    </div>
  </fieldset>
  <fieldset>
    <legend>Shipping address</legend>
    <div class="control">
      <label for="shipping_first_name">First name</label><input id="shipping_first_name" type="text" />
    </div>
    <div class="control">
      <label for="shipping_last_name">Last name</label><input id="shipping_last_name" type="text" />
    </div>
    <div class="control">
      <label for="shipping_street">Street</label><input id="shipping_street" type="text" />
    </div>
    <div class="control">
      <label for="shipping_city">City</label><input id="shipping_city" type="text" />
    </div>
  </fieldset>
</form>
.control, fieldset {
  margin: 6px 0;
}

label {
  display: inline-block;
  width: 120px;
  vertical-align: top;
}

NIL