fieldset

< html‎ | elements
Jump to: navigation, search

fieldset

This article is .



Summary

The fieldset element is used to group related elements in a form.


Overview Table

DOM Interface HTMLFieldSetElement

The fieldset element represents a set of form controls. Optionally grouped under a common name with an additional legend element.

HTML5 adds the following attributes which are fully optional.

Attributes (HTML 5)

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.


Compatibility

Do you think this data can be improved? You can ask to add by opening an issue or make a pull request.

Desktop

FeaturesChromeFirefoxInternet ExplorerOperaSafari
Basic support
?
Yes
1.0
Yes
?
Yes
?
Yes
?
Yes

Mobile

FeaturesAndroidFirefox MobileIE MobileOpera MobileSafari Mobile
Basic support
?
Yes
1.0
Yes
?
Yes
?
Yes
?
Yes

Examples

View live exampleSimple form with fieldset, legend, and label elements.

HTML

<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 exampleThe following snippet shows a fieldset with a checkbox in the legend that controls whether or not the fieldset is enabled.

HTML

<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>
    
     <label for="clubname">Name on card:</label>
     <input name="clubname" type="text">
     <label for="clubnum">Card number:</label>
     <input name="clubnum" type="number">
     <label for="clubnum">Expiry date:</label>
     <input name="clubexp" type="date">
 </fieldset>

</form>

View live exampleExample with nested fieldset elements.

HTML

<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>
    
     <label for="">Name on card:</label>
     <input name="clubname">
   <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>
       <label for="clubnum">Card number:</label>
       <input name="clubnum" id="clubnum" type="text">
   </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>
       <label for="clublet">Card code:</label>
       <input name="clublet" id="clublet">
   </fieldset>
 </fieldset>

</form>

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.

Nesting fieldsets

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


Related specifications

Specification Status Related Changes
HTML5 W3C Candidate Recommendation
HTML 4.01 Specification W3C Recommendation New attributes: disabled, form, name

See also

Related articles

HTML












































  • fieldset







… further results

Other articles

External resources

Attribution

This article contains content originally from external sources.

Portions of this content come from the Mozilla Developer Network cc-by-sa-small-wpd.svg: Article

Portions of this content come from the Microsoft Developer Network: [Windows Internet Explorer API reference Article]