<fieldset>

The <fieldset> element represents a set of form controls optionally grouped under a common name.

Point

• The name of the group is given by the first legend element that is a child of the fieldset element, if any. The remainder of the descendants form the group.

HTML Attributes

• disabled = boolean
  When specified, causes all the form control descendants of the fieldset element, excluding those that are descendants of the fieldset element's first legend element child, if any, to be disabled. [Example B]

• form = string
  Associate the fieldset element with its form owner.

• name = string
  Represents the element's name.

See also global attributes.

Examples

Example A

[try it]:

<fieldset name="userinfo">
  <legend>User information</legend>
  <label for="name">Name</label>
  <input type="text" name="name" id="name" size="40">
  <label for="address">Address</label>
  <input type="text" name="address" id="address" size="40">
  <label for="phone">Phone</label>
  <input type="text" name="phone" id="phone" size="40">
</fieldset>

Example B

The following snippet shows a fieldset with a checkbox in the legend that controls whether or not the fieldset is enabled.

<fieldset name="clubfields" disabled>
  <legend>
    <label>
      <input type="checkbox" name="club"
          onchange="form.clubfields.disabled = !checked">
      Use Club Card
    </label>
  </legend>
  <p><label>Name on card: <input name=clubname required></label></p>
  <p><label>Card number: <input name=clubnum required pattern="[-0-9]+">
         </label></p>
  <p><label>Expiry date: <input name=clubexp type=month></label></p>
</fieldset>

HTML Reference

The HTML5 specification defines the <fieldset> element in 4.10.4 The fieldset element.

History