W3cubDocs

/HTML

<fieldset>

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

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

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

[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

See also

© 2005–2017 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset