HTML <legend> element

The <legend> element represents the caption for a <fieldset>. It names or explains the group of controls that the fieldset contains.

In a group of radio buttons, each individual radio button needs its own <label>, but the whole group still needs a shared question. That shared question belongs in the <legend>.

A fieldset may have one <legend>, which must be its first child element, directly inside it. The legend names the group; it does not replace the labels on individual controls.

This element is not just a styled heading. It has a direct relationship with the fieldset. A heading may introduce a section of a page; a legend captions a grouped set of form controls.

The wording should be clear and specific. A legend such as Options is often too vague. A legend such as Choose your preferred contact method tells the user exactly what the group means.

Screen readers can use the legend to supply context when a user moves among the controls. In the example, Email and Phone make sense as answers because the legend states the question. Keep that shared wording concise.

In supporting browsers, a <legend> can also be the first child of an <optgroup> in a customisable select, supplying the option group's label. This is a separate use from captioning a fieldset; ordinary select menus commonly use the optgroup's label attribute.

Attributes: GLOBALS.

Typical layout:
<fieldset>
  <legend>Preferred contact method</legend>
  <p><label>
    <input type="radio" name="pf-contact-demo" value="email">
    Email
  </label></p>
  <p><label>
    <input type="radio" name="pf-contact-demo" value="phone">
    Phone
  </label></p>
</fieldset>

Visual representation: