©
This document uses PHP Chinese website manual Release
fieldset 元素通常用来对表单中的控制元素进行分组(也包括 label 元素)
内容类别 | 流内容，切片根，列出，形式相关元素，可触及的内容。 |
|---|---|
允许的内容 | 一个可选的<legend>元素，接着是流内容。 |
标记遗漏 | 没有，起始和结束标签都是强制性的。 |
允许的父母 | 任何接受流内容的元素。 |
允许ARIA角色 | 组，演示文稿 |
DOM界面 | HTMLFieldSetElement |
注意：与几乎任何其他元素不同，WHATWG HTML Rendering规范建议将min-width:min-content作为<fieldset>默认样式的一部分，许多浏览器都实现了这种样式（或与其近似的东西）。
注：该<fieldset>元素预计将建立一个新的块格式上下文。
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>
<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…</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>规范 | 状态 | 评论 |
|---|---|---|
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) |