<fieldset>

 
fieldset元素 通常用来对表单的相关元素分组

 

Content categories Flow content, sectioning root, listed, form-associated element, palpable content.
Permitted content An optional <legend> element, followed by flow content.
Tag omission 不允许，开始标签和结束标签都不能省略。
Permitted parent elements Any element that accepts flow content.
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).

属性

 fieldset  的所有属性

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
规定fieldset所属的form表单。 这个属性的值与其所属的form的ID相同。默认值是最近的那个form。
      
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 http-equiv="Content-Type" content="text/html; 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///wAAAAAAAAAAAAAAAAAAAAAAACH5BAEAADkALAAAAAAQABAAAAaXwJxwSCwOYzWkMpkkZmoAqDQaJdpqAqw2m53NRjlboAarFczomcE0C99o8DgNMVM8Tm3bbYDr9x11DwkzDG5yc2oQJIRCenx/MxoeETM2Q3pxATMlF4MYlo17OAsdLispMyAioIY0BzMcITMTKBasjgssFTMqGxItMjYUoTQBBAQHxgE0wZcfMtDRMi/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
<fieldset>		 Living Standard Definition of the fieldset element
WHATWG HTML Living Standard Living Standard Suggested default rendering of the fieldset and legend elements
HTML5
<fieldset>		 Recommendation  
HTML 4.01 Specification
<fieldset>		 Recommendation Initial definition

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Yes) 1.0 (1.7 or earlier) (Yes) (Yes) (Yes)
disabled attribute (Yes) (Yes) (Yes)[1] 12 6
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Yes) 1.0 (1.0) (Yes) (Yes) (Yes)
disabled attribute 4.4 ? ? ? 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

文档标签和贡献者