1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
|
---
title: <fieldset>
slug: Web/HTML/Element/fieldset
tags:
- Element
- HTML
- HTML表单
- 元素
- 参考
- 表单
translation_of: Web/HTML/Element/fieldset
---
<div>{{HTMLRef}}</div>
<div><strong>HTML <code><fieldset></code> </strong>元素用于对表单中的控制元素进行分组（也包括 label 元素）。</div>
<div></div>
<div>{{EmbedInteractiveExample("pages/tabbed/fieldset.html", "tabbed-standard")}}</div>
<div>如上述例子所示，<code><fieldset></code> 元素将一个HTML表单的一部分组成一组，内置了一个 {{htmlelement("legend")}} 元素作为 <code>fieldset</code> 的标题。这个元素有几个属性，最值得注意的是 <code>form</code>，其可以包含同一页面的 {{htmlelement("form")}} 元素的 <code>id</code>，以使 <code><fieldset></code> 成为这个 <code><form></code> 的一部分，即使 <code><fieldset></code> 不在其内。还有 <code>disabled</code> 属性，可将 <code><fieldset></code> 及其所有内容设置为不可用。</div>
<h2 id="属性">属性</h2>
<p> 这个元素包含<a href="/en-US/docs/HTML/Global_attributes">所有全局属性</a>。</p>
<dl>
<dt>{{htmlattrdef("disabled")}}</dt>
<dd>如果设置了这个 bool 值属性, <code><fieldset></code> 的所有子代表单控件也会继承这个属性。这意味着它们不可编辑，也不会随着 {{htmlelement("form")}} 一起提交。它们也不会接收到任何浏览器事件，如鼠标点击或与聚焦相关的事件。默认情况下，浏览器会将这样的控件展示为灰色。注意，{{HTMLElement("legend")}} 中的表单元素不会被禁用。</dd>
<dt>{{htmlattrdef("form")}}</dt>
<dd>将该值设为一个 {{HTMLElement("form")}} 元素的 {{htmlattrxref("id")}} 属性值以将 <code><fieldset></code> 设置成这个 {{HTMLElement("form")}} 的一部分。 </dd>
<dt>{{htmlattrdef("name")}}</dt>
<dd>元素分组的名称
<div class="note"><strong>注意：</strong>fieldset 的标题由第一个 {{HTMLElement("legend")}} 子元素确定。</div>
</dd>
</dl>
<h2 id="使用_CSS_样式">使用 CSS 样式</h2>
<p><code><fieldset></code> 有几种特别的样式方案。</p>
<p>它的 {{cssxref("display")}} 值默认为 <code>block</code>，因此建立了一个<a href="/zh-CN/docs/Web/Guide/CSS/Block_formatting_context">块级格式化上下文</a>。如果将 <code><fieldset></code> 的 <code>display</code> 值设置为行内级别，则会表现为 <code>inline-block</code>，否则会表现为 <code>block</code>。默认情况下 <code><fieldset></code> 会有 <code>2px</code> <code>groove</code> 的边界围绕着内容，还有一个默认的小的内边距，还有 {{cssxref("min-inline-size", "min-inline-size: min-content")}} 。</p>
<p>如果其中有 {{htmlelement("legend")}} 元素，会放在块级框起始处的边界上。<code><legend></code> 的宽度会根据内容尽量收缩（shrink-wrap），同时也建立了一个格式化上下文。<code>display</code> 值会块级化（例如 <code>display: inline</code> 表现为 <code>block</code>）。</p>
<p>一个匿名的框会包围 <code><fieldset></code> 的内容，这个框继承了 <code><fieldset></code> 的一些属性。如果将 <code><fieldset></code> 的样式设置为 <code>display: grid</code> 或 <code>display: inline-grid</code>，那么这个匿名框也会是栅格上下文。如果将 <code><fieldset></code> 的样式设置为 <code>display: flex</code> 或 <code>display: inline-flex</code>，则匿名框也会是弹性盒上下文。除上述情况之外，匿名框默认建立块级格式化上下文。</p>
<p>你可以以任意方式自行设置 <code><fieldset></code> 和 <code><legend></code> 的样式以配合你的页面设计。</p>
<div class="blockIndicator note">
<p><strong>注意：</strong>截至这篇文章发出为止，Microsoft Edge 和 Google Chrome 不能在 {{HTMLElement("fieldset")}} 中使用 <a href="/zh-CN/docs/Glossary/Flexbox">flexbox</a> 和 <a href="/zh-CN/docs/Web/CSS/CSS_Grid_Layout">grid </a>布局。<a href="https://github.com/w3c/csswg-drafts/issues/321">这个 GitHub issue</a> 跟踪了这个bug。</p>
</div>
<h2 id="Examples">示例</h2>
<h3 id="Simple_fieldset">简单的 fieldset</h3>
<p>这个例子展示了一个非常简单的 <code><fieldset></code>，其中有一个 <code><legend> </code>和一个简单的控件。</p>
<pre class="brush: html"><form action="#">
<fieldset>
<legend>Simple fieldset</legend>
<input type="radio" id="radio">
<label for="radio">Spirit of radio</label>
</fieldset>
</form></pre>
<p>{{ EmbedLiveSample('Simple_fieldset', '100%', '80') }}</p>
<h3 id="Disabled_fieldset">禁用 fieldset</h3>
<p>这个例子展示了一个被禁用的 <code><fieldset></code> ，其中有两个控件。注意随着 <code><fieldset></code> 被一起禁用的控件如何表现。</p>
<pre class="brush: html"><form action="#">
<fieldset disabled>
<legend>Disabled fieldset</legend>
<div>
<label for="name">Name: </label>
<input type="text" id="name" value="Chris">
</div>
<div>
<label for="pwd">Archetype: </label>
<input type="password" id="pwd" value="Wookie">
</div>
</fieldset>
</form></pre>
<p>{{ EmbedLiveSample('Disabled_fieldset', '100%', '110') }}</p>
<h2 id="技术概览">技术概览</h2>
<table class="properties">
<tbody>
<tr>
<th scope="row"><a href="/zh-CN/docs/HTML/Content_categories">内容目录</a></th>
<td><a href="/zh-CN/docs/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/zh-CN/docs/Sections_and_Outlines_of_an_HTML5_document#sectioning_root">sectioning root</a>, <a href="/zh-CN/docs/HTML/Content_categories#form_listed">listed</a>, <a href="/zh-CN/docs/HTML/Content_categories#form-associated_content">form-associated</a> element, palpable content.</td>
</tr>
<tr>
<th scope="row">允许的内容</th>
<td>可选的{{HTMLElement("legend")}} 元素，后面是内容流（flow content）</td>
</tr>
<tr>
<th scope="row">标签省略</th>
<td>{{no_tag_omission}}</td>
</tr>
<tr>
<th scope="row">允许的父元素</th>
<td>Any element that accepts <a href="/zh-CN/docs/HTML/Content_categories#Flow_content">flow content</a>.</td>
</tr>
<tr>
<th scope="row">默认 ARIA role</th>
<td>{{ARIARole("group")}}</td>
</tr>
<tr>
<th scope="row">允许的 ARIA roles</th>
<td>{{ARIARole("radiogroup")}}, {{ARIARole("presentation")}}, {{ARIARole("none")}}</td>
</tr>
<tr>
<th scope="row">DOM 接口</th>
<td>{{domxref("HTMLFieldSetElement")}}</td>
</tr>
</tbody>
</table>
<h2 id="规范">规范</h2>
<p>{{Specifications}}</p>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<p>{{Compat}}</p>
<p>[1] 在 IE11 中 disabled 的 fieldset 的子元素并不会全都被 disabled; 相关 Issues: <a href="https://connect.microsoft.com/IE/feedbackdetail/view/817488">IE bug 817488: <code>input[type="file"]</code> not disabled inside disabled <code>fieldset</code></a> and <a href="https://connect.microsoft.com/IE/feedbackdetail/view/962368/can-still-edit-input-type-text-within-fieldset-disabled">IE bug 962368: Can still edit <code>input[type="text"]</code> within <code>fieldset[disabled]</code></a>.</p>
<h2 id="参见">参见</h2>
<ul>
<li>{{HTMLElement("legend")}} 元素</li>
<li>{{HTMLElement("input")}} 元素</li>
<li>{{HTMLElement("label")}} 元素</li>
<li>{{HTMLElement("form")}} 元素</li>
</ul>
|
