HTML 中文开发手册
目录 搜索
Attributes accesskey (attribute) class (attribute) contenteditable (attribute) contextmenu (attribute) data-* (attribute) dir (attribute) draggable (attribute) dropzone (attribute) Global attributes hidden (attribute) id (attribute) itemid (attribute) itemprop (attribute) itemref (attribute) itemscope (attribute) itemtype (attribute) lang (attribute) slot (attribute) spellcheck (attribute) style (attribute) tabindex (attribute) title (attribute) translate (attribute) Elements a abbr address area article aside audio b base bdi bdo blockquote body br button canvas caption cite code col colgroup data datalist dd del details dfn dialog div dl dt em embed fieldset figcaption figure footer form h1 head header hr html i iframe img input input type="button" input type="checkbox" input type="color" input type="date" input type="datetime"-local input type="email" input type="file" input type="hidden" input type="image" input type="month" input type="number" input type="password" input type="radio" input type="range" input type="reset" input type="search" input type="submit" input type="tel" input type="text" input type="time" input type="url" input type="week" ins kbd label legend li link main map mark menu menuitem meta meter nav noscript object ol optgroup option output p param picture pre progress q rp rt rtc ruby s samp script section select slot small source span strong style sub summary sup table tbody td template textarea tfoot th thead time title tr track u ul var video wbr Miscellaneous Attributes Block-level elements CORS enabled image CORS settings attributes Element Inline elements Kinds of HTML content Link types Microdata Optimizing your pages for speculative parsing Preloading content Reference Supported media formats Using the application cache Obsolete acronym applet basefont big blink center command content dir element font frame frameset hgroup image input type="datetime" isindex keygen listing marquee nextid noframes plaintext strike tt xmp

©
本文档使用 php中文网手册 发布

文字

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>

示例 #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>

规范

规范

状态

评论

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)

上一篇： 下一篇：