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.
disabledHTML5- 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.
formHTML5- 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.
nameHTML5- 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 warnedthat screen readers and assistive devices willnotinterpret 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:hoverinput[type="radio"]:checked ~ label { width: 100%;}fieldset.elist:hover label { display: block; height: 100%;}fieldset.elist label:hover { background-color: #3333ff !important;}fieldset.elist:hoverinput[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…</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>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 |
Browser compatibility
| 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
- bug504622 - Fieldsets never shrink below their
min-intrinsicwidth - WebKit bug 123507 -
min-width:on fieldset-webkit-min-content - StackOverflow discussion with workarounds for the above bugs
See also
- Other form-related elements: <form>, <legend>, <label>, <button>, <select>, <datalist>, <optgroup>, <option>, <textarea>, <keygen>, <input>, <output>, <progress> and <meter>.
Document Tags and Contributors
Tags:
- Element
- Forms
- HTML
- HTML forms
- Intermediate
- Reference
- Web
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,
