fieldset

fieldset 元素通常用来对表单中的控制元素进行分组(也包括 label 元素)

内容类别	流内容，切片根，列出，形式相关元素，可触及的内容。
允许的内容	一个可选的<legend>元素，接着是流内容。
标记遗漏	没有，起始和结束标签都是强制性的。
允许的父母	任何接受流内容的元素。
允许ARIA角色	组，演示文稿
DOM界面	HTMLFieldSetElement

注意：与几乎任何其他元素不同，WHATWG HTML Rendering规范建议将min-width:min-content作为<fieldset>默认样式的一部分，许多浏览器都实现了这种样式（或与其近似的东西）。

注：该<fieldset>元素预计将建立一个新的块格式上下文（见HTML5规范）。

属性

?fieldset ?中包含所有全局属性

disabledHTML5如果设置了这个 bool 值属性, 它的后代表单控制元素也会继承这个属性, 它的首个可选的 legend 元素除外, 例如, 禁止编辑. 该元素和它的子元素不会接受任何浏览器事件, 比如点击或者 focus 事件,?一般来说浏览器会将这样的元素展示位灰色.

formHTML5规定fieldset所属的form表单. 这个属性的值与其所属的form的ID相同. 默认值是最近的那个form.?

nameHTML5控制元素分组的名称

该字段集的标签由该字段集的第一个<legend>元素给出。

示例

示例 #1: 一个拥有 fieldset, legend 和 label 的表单

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

示例 #2: 利用包含?radioboxes and textboxes?的 fieldset 模拟一个可编辑的?`<select>` 元素

下面的例子只使用了 HTML 和 CSS.?

请注意, 屏幕朗读和辅助设备不能正确的解析下面的表单, 如果不使用正确的元素这个例子是不适合在生产环境中使用.?

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

规范

规范	状态	评论
HTML生活标准该规范中'<fieldset>'的定义。	生活水平	fieldset元素的定义
HTML生活标准	生活水平	建议的字段集和图例元素的默认呈现
HTML5该规范中'<fieldset>'的定义。	建议	?
HTML 4.01规范该规范中'<fieldset>'的定义。	建议	初始定义

浏览器兼容性

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)

本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com

最后更新于：2017-12-18

属性

示例

示例 #2: 利用包含?radioboxes and textboxes?的 fieldset 模拟一个可编辑的?<select> 元素

规范

浏览器兼容性

示例 #2: 利用包含?radioboxes and textboxes?的 fieldset 模拟一个可编辑的?`<select>` 元素