HTML <fieldset> element

The <fieldset> element groups related form controls. It is used when several controls belong to one question, one topic, or one small section of a form.

A natural example is a group of radio buttons. Each radio button has its own label, but the group as a whole still needs a question such as Choose a size. The <fieldset> creates that group.

An optional <legend>, placed first inside the fieldset, gives the group its caption. This helps readers, including screen-reader users, understand the shared question. The radio buttons' matching name values create their mutually exclusive selection behaviour; the fieldset itself does not.

The disabled attribute disables descendant form controls, preventing interaction and excluding their values from submission. Controls inside the first legend are exempt from this fieldset's disabling effect. A checkbox there can therefore remain usable while script enables or disables the rest of the group; the checkbox does not toggle the fieldset automatically.

The <fieldset> element should not be used merely because a border looks useful. If the content is not a group of related controls or closely related form content, a normal container and CSS may be cleaner.

The form attribute can associate the fieldset with a form by id, but that association is not inherited by its controls. Controls outside a form need their own form attributes if they are to submit with it. The fieldset's name identifies the group for scripting; it does not submit a combined value for the controls.

Attributes: disabled, form, name, GLOBALS.

Typical layout:
<fieldset>
  <legend>Choose a size</legend>
  <p><label>
    <input type="radio" name="pf-size-demo" value="small">
    Small
  </label></p>
  <p><label>
    <input type="radio" name="pf-size-demo" value="large">
    Large
  </label></p>
</fieldset>

Visual representation: