This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

fieldset

Summary

The fieldset element is used to group related fields within a form.


Overview Table

DOM Interface
HTMLFieldSetElement

The fieldset element represents a set of form controls. Optionally given a name with a child legend element.

attributes

NOTE: Those attributes are considered valid since HTML5

disabled
If this Boolean attribute is set, the form controls that are its descendants, except descendants of its first optional legend element, are disabled, i.e., not editable. They won't receive any browsing events, like mouse clicks or focus-related ones. Often browsers display such controls as gray.
form
This attribute has the value of the id attribute of the form element its related to. Its default value is the id of the nearest <form> element it is a descendant of.
name
The name associated with the group. This is for use in the form.elements API.

Examples

Simple form with fieldset, legend, and label elements. 

<form action="" method="post">
  <fieldset>
    <legend>Title</legend>
    <label for="radio">Click me</label>
    <input type="radio" name="radio" id="radio">
  </fieldset>
</form>

View live example

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

<form>
  <fieldset name="clubfields" disabled>
    <legend>
      <label for="club">Use Club Card</label>
      <input type="checkbox" id="club" name="club" onchange="form.clubfields.disabled = !checked">
    </legend>
    <div>
      <label for="clubname">Name on card:</label>
      <input name="clubname" type="text">
    </div>
    <div>
      <label for="clubnum">Card number:</label>
      <input name="clubnum" type="number">
    </div>
    <div>
      <label for="clubnum">Expiry date:</label>
      <input name="clubexp" type="date">
    </div>
  </fieldset>
</form>

View live example

Example with nested fieldset elements. 

<form action="">
  <fieldset name="clubfields" disabled>
    <legend>
      <label for="club">Use Club Card</label>
      <input type="checkbox" name="club" id="club" onchange="form.clubfields.disabled = !checked">
    </legend>
    <div>
      <label for="">Name on card:</label>
      <input name="clubname">
    </div>
    <fieldset name="numfields">
      <legend>
        <label for="clubtype">My card has numbers on it</label>
        <input type="radio" checked name="clubtype" id="clubtype" onchange="form.numfields.disabled = !checked">
      </legend>
      <div>
        <label for="clubnum">Card number:</label>
        <input name="clubnum" id="clubnum" type="text">
      </div>
    </fieldset>
    <fieldset name="letfields" disabled>
      <legend>
        <label>My card has letters on it</label>
        <input type="radio" name="clubtype" id="clubtype" onchange="form.letfields.disabled = !checked">
      </legend>
      <div>
        <label for="clublet">Card code:</label>
        <input name="clublet" id="clublet">
      </div>
    </fieldset>
  </fieldset>
</form>

View live example

Usage

 Fieldsets are not required but useful for grouping elements in a form to enhance the visual flow and usability of complex forms. optionally you can use a legend element to give your fieldset element a caption.

Notes

Default layout

Typically, the browser draws a box around the containing elements of every fieldset. This border can be disabled via CSS border: none; The border contains the legend by default. See legend for details.

The "Rendering" section of the WHATWG HTML specification suggests min-width: min-content as part of the default style for fieldset, and many browsers implement such styling (or something that approximates it); almost no other element shares this default style. See also StackOverflow, Mozilla bug #504622, and WebKit bug #123507.

Nesting fieldsets

It’s also possible and in certain use cases pretty useful to nest fieldsets.

Compatibility

Not all form control descendants of a disabled fieldset are properly disabled in IE11; see IE bug 817488: input[type="file"] not disabled inside disabled fieldset and IE bug 962368: Can still edit input[type="text"] within fieldset[disabled].


Related specifications

HTML 5.1
W3C Working Draft
HTML 5
W3C Recommendation
HTML 4.01
W3C Recommendation

See also

Related articles

HTML












































  • fieldset



























Other articles

External resources

Attributions