HTML fieldset and legend: name a group before its choices

Last updated: 1 Oct 20268 min read

tutorial

Fieldset groups related controls, and its first legend gives the group a name.

Implementation choice

A dispatch form asks how a damaged parcel should be handled. The three radio labels identify individual actions; the legend asks the shared question they answer. Without that group name, a reader moving control by control can hear an action without its context. A fieldset is also useful for repeated address fields where the same label appears in two groups. Keep legends short enough to be understood when repeated alongside each control label.

<form action="/parcels/P-47/handling" method="post">
  <fieldset>
    <legend>How should parcel P-47 be handled?</legend>
    <label><input type="radio" name="handling" value="inspect" required> Inspect at depot</label>
    <label><input type="radio" name="handling" value="return"> Return to sender</label>
    <label><input type="radio" name="handling" value="hold"> Hold for review</label>
  </fieldset>
  <button type="submit">Save handling decision</button>
</form>

What remains outside the markup

The browser submits one selected handling value. The server must check that the value is allowed for this parcel and the current user's role; the fieldset does not enforce business permission or persistence.

Cost and limits

The native group adds little markup and no script. Its main maintenance cost is keeping the question, options, and server's allowed values aligned when operational policy changes.

Common Mistakes

Do not rely on three standalone radio labels to explain the shared question.
Do not use fieldset only for a visual border.
Do not treat required as server-side authorization.

Connected lessons

html

forms