<fieldset>

In This Article

The HTML <fieldset> element is used to group several controls as well as labels (<label>) within a web form.

Content categories	Flow content, sectioning root, listed, form-associated element, palpable content.
Permitted content	An optional `<legend>` element, followed by flow content.
Tag omission	None, both the starting and ending tag are mandatory.
Permitted parents	Any element that accepts flow content.
Permitted ARIA roles	`group`, `presentation`
DOM interface	`HTMLFieldSetElement`

Note: unlike almost any other element, the WHATWG HTML Rendering spec suggests min-width: min-content as part of the default style for <fieldset>, and many browsers implement such styling (or something that approximates it).

Note: The <fieldset> element is expected to establish a new block formatting context(See HTML5 spec).

Attributes

This element includes the global attributes.

disabled HTML5: 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 HTML5: This attribute has the value of the id attribute of the <form> element it's related to. Its default value is the id of the nearest <form> element it is a descendant of.
name HTML5: The name associated with the group.

The label for the field set is given by the first <legend> element that is a child of this field set.

Examples

Example #1: Form with fieldset, legend, and label

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

Example #2: Simulating an editable `<select>` through a `fieldset` of radioboxes and textboxes*

The following example is made of pure HTML and CSS. There is no JavaScript code.

Be warned that screen readers and assistive devices will not interpret the following form correctly; this example would be invalid HTML if the correct elements were used.

<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Editable [pseudo]select</title>
<style type="text/css">
/* Generic form fields */
fieldset.elist, input[type="text"], textarea, select,
option, fieldset.elist ul, fieldset.elist > legend,
fieldset.elist input[type="text"],
fieldset.elist > legend:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
input[type="text"] {
  padding: 0 20px;
}
textarea {
  width: 500px;
  height: 200px;
  padding: 20px;
}
textarea, input[type="text"], fieldset.elist ul,
select, fieldset.elist > legend {
  border: 2px #cccccc solid;
  border-radius: 10px;
}
input[type="text"], fieldset.elist, select,
fieldset.elist > legend {
  height: 32px;
  font-family: Tahoma;
  font-size: 14px;
}
input[type="text"]:hover, textarea:hover,
select:hover, fieldset.elist:hover > legend {
  background-color: #ddddff;
}
select {
  padding: 4px 20px;
}
option {
  height: 30px;
  padding: 5px 4px;
}
option:not(:checked), textarea:focus {
  background-color: #ffcccc;
}
fieldset.elist > legend:after,
fieldset.elist label {
  height: 28px;
}
input[type="text"], fieldset.elist {
  width: 316px;
}
input[type="text"]:focus {
  background: #ffcccc url("data:image/gif;
  base64,R0lGODlhEAAQANU5APnoxuvr6+uxPdvb2+
  rq6ri4uO7qxunp6dPT06SHV+/rx8vLy+
  nezLO0sbe3t9Ksas+qaaCEV8rKyp2dnf39/
  QAAAK6ursifZHFxcc/
  Qzu3mxYyMjExCJnV1dc6maO7u7o+
  Pj2tXNoaGhtfDpKCDVu3lxM+
  tcaKEV9bW1qOFVWNjY8KrisTExNra2nBbObGxsby8vO/
  mu7Kyso9ZAuzs7MSgAIiKhf///8zMzP///
  wAAAAAAAAAAAAAAAAAAAAAAACH5BAEAADkALAAAAAAQ
  ABAAAAaXwJxwSCwOYzWkMpkkZmoAqDQaJdpqAqw2m53
  NRjlboAarFczomcE0C99o8DgNMVM8Tm3bbYDr9x11Dw
  kzDG5yc2oQJIRCenx/MxoeETM2Q3pxATMlF4MYlo17O
  AsdLispMyAioIY0BzMcITMTKBasjgssFTMqGxItMjYU
  oTQBBAQHxgE0wZcfMtDRMi/QrA022NnaNg1CQQA7")
  no-repeat 2px center !important;
}
input[type="text"]:focus, textarea:focus,
select:focus, fieldset.elist > legend {
  border: 2px #ccaaaa solid;
}
fieldset {
  border: 2px #af3333 solid;
  border-radius: 10px;
}
/* Editable [pseudo]select
(i.e. fieldsets with [class=elist]) */
fieldset.elist {
  display: inline-block;
  position: relative;
  vertical-align: middle;
  overflow: visible;
  padding: 0;
  margin: 0;
  border: none;
}
fieldset.elist ul {
  position: absolute;
  width: 100%;
  max-height: 320px;
  padding: 0;
  margin: 0;
  overflow: hidden;
  background-color: transparent;
}
fieldset.elist:hover ul {
  background-color: #ffffff;
  border: 2px #af3333 solid;
  left: 2px;
  overflow: auto;
}
fieldset.elist ul > li {
  list-style-type: none;
  background-color: transparent;
}
fieldset.elist label {
  display: none;
  width: 100%;
}
fieldset.elist input[type="text"] {
  width: 100%;
  height: 30px;
  line-height: 30px;
  border: none;
  background-color: transparent;
  border-radius: 0;
}
fieldset.elist > legend {
  display: block;
  margin: 0;
  padding: 0 0 0 5px;
  position: absolute;
  width: 100%;
  cursor: default;
  background-color: #ccffcc;
  line-height: 30px;
  font-style: italic;
}
fieldset.elist:hover > legend {
  position: relative;
  overflow: hidden;
}
fieldset.elist > legend:after {
  width: 20px;
  content: "\2335";
  float: right;
  text-align: center;
  border-left: 2px #cccccc solid;
  font-style: normal;
  cursor: default;
}
fieldset.elist:hover > legend:after {
  background-color: #99ff99;
}
fieldset.elist ul input[type="radio"] {
  display: none;
}
fieldset.elist input[type="radio"]:checked ~ label {
  display: block;
  width: 292px;
  background-color: #ffffff;
}
fieldset.elist:hover
input[type="radio"]:checked ~ label {
  width: 100%;
}
fieldset.elist:hover label {
  display: block;
  height: 100%;
}
fieldset.elist label:hover {
  background-color: #3333ff !important;
}
fieldset.elist:hover
input[type="radio"]:checked ~ label {
  background-color: #aaaaaa;
}
</style>
</head>
<body>
<form method="get" action="test.php">
<fieldset>
    <legend>Order a T-Shirt</legend>
    <p>Write your name (simple textbox):
    <input type="text" /></p>
    <p>Choose your size (simple select):
    <select>
        <option value="s">Small</option>
        <option value="m">Medium</option>
        <option value="l">Large</option>
        <option value="xl">Extra Large</option>
    </select></p>
    <div>What address do you want to use?
    (editable pseudoselect)
    <fieldset class="elist">
        <legend>Address&hellip;</legend>
        <ul>
            <li><input type="radio" value="1"
            id="address-switch_1" checked
            /><label for="address-switch_1"
            ><input type="text"
            value="19 Quaker Ridge Rd. Bethel CT 06801"
            /></label></li>
            <li><input type="radio" value="2"
            id="address-switch_2"
            /><label for="address-switch_2"
            ><input type="text"
            value="1000 Coney Island Ave.
            Brooklyn NY 11230"
            /></label></li>
            <li><input type="radio" value="3"
            id="address-switch_3"
            /><label for="address-switch_3"
            ><input type="text"
            value="2962 Dunedin Cv. Germantown TN 38138"
            /></label></li>
            <li><input type="radio" value="4"
            id="address-switch_4"
            /><label for="address-switch_4"
            ><input type="text"
            value="915 E 7th St. Apt 6L. Brooklyn NY 11230"
            /></label></li>
        </ul>
    </fieldset>
    </div>
    <p>Write a comment:<br />
    <textarea></textarea></p>
    <p><input type="reset" value="Reset" />
    <input type="submit" value="Send!" /></p>
</fieldset>
</form>
</body>
</html>

View this example in action

Specifications

Specification	Status	Comment
WHATWG HTML Living Standard The definition of '<fieldset>' in that specification.	Living Standard	Definition of the `fieldset` element
WHATWG HTML Living Standard	Living Standard	Suggested default rendering of the `fieldset` and `legend` elements
HTML5 The definition of '<fieldset>' in that specification.	Recommendation
HTML 4.01 Specification The definition of '<fieldset>' in that specification.	Recommendation	Initial definition

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	(Yes)	(Yes)	1.0 (1.7 or earlier)	(Yes)	(Yes)	(Yes)
`disabled` attribute	(Yes)	(Yes)	(Yes)	(Yes)^[1]	12	6
Establish a new block formatting	(Yes)	(Yes)	(Yes)	(Yes)	(Yes)	(Yes)

Feature	Android	Edge	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	(Yes)	(Yes)	1.0 (1.0)	(Yes)	(Yes)	(Yes)
`disabled` attribute	4.4	(Yes)	?	?	?	6.0
Establish a new block formatting	(Yes)	(Yes)	(Yes)	(Yes)	(Yes)	(Yes)

[1] 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].

Bugs

bug 504622 - Fieldsets never shrink below their min-intrinsic width
WebKit bug 123507 - min-width: -webkit-min-content on fieldset
StackOverflow discussion with workarounds for the above bugs

Document Tags and Contributors

Tags:

Contributors to this page: bunnybooboo, yisibl, tommorris, sideshowbarker, erikadoyle, corderophilosophy, joallard, Sebastianz, cvrebert, jmsfwk, Colin, Andrew_Luhring, mayconrem, gavrilov, probackpacker, kscarfone, ErikEckhardt, ethertank, tregagnon, Sheppy, barney, fusionchess, medicdude, teoli, ben545, nyc212, cers, McGurk, jswisher

Last updated by: bunnybooboo, Apr 19, 2017, 10:34:48 AM