Grouping with fieldset in HTML

A fieldset groups related controls and its legend names the group.

<fieldset>
  <legend>Delivery address</legend>
  <label>
    Street
    <input type="text" name="street" autocomplete="address-line1">
  </label>
  <label for="postcode">Postcode</label>
  <input type="text" id="postcode" name="postcode" inputmode="numeric">
</fieldset>

How it works

1. legend must be the first child of the fieldset.
2. Wrapping an input inside its label needs no for attribute.
3. Grouping is what screen readers announce before the fields.

The run, in numbers

Lines

9

Characters to type

252

Tokens

61

Three-star pace

65 tpm

At the three-star pace of 65 tokens a minute, this run takes about 56 seconds.

Type this snippet

Step 4 of 5 in Fields & labels, step 7 of 25 in Forms & inputs.

← Previous Next →