HTML/Elements/fieldset

From Web Education Community Group
< HTML‎ | Elements
Revision as of 13:50, 19 November 2011 by Rworth (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

<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>

Fieldset01.png

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>

Fieldset02.png

HTML Reference

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