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
145
146
147
148
149
150
151
152
153
154
155
156
157
158
|
<header><h1><fieldset>: The Field Set element</h1></header><div class="section-content"><p>The <code><fieldset></code> <a href="../index">HTML</a> element is used to group several controls as well as labels (<a href="label"><code><label></code></a>) within a web form.</p></div>
<h2 id="try_it">Try it</h2>
<div class="section-content">
<iframe class="interactive is-tabbed-standard-height" height="200" src="https://interactive-examples.mdn.mozilla.net/pages/tabbed/fieldset.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <p>As the example above shows, the <code><fieldset></code> element provides a grouping for a part of an HTML form, with a nested <a href="legend"><code><legend></code></a> element providing a caption for the <code><fieldset></code>. It takes few attributes, the most notable of which are <code>form</code>, which can contain the <code>id</code> of a <a href="form"><code><form></code></a> on the same page, allowing you to make the <code><fieldset></code> part of that <code><form></code> even if it is not nested inside it, and <code>disabled</code>, which allows you to disable the <code><fieldset></code> and all its contents in one go.</p>
</div>
<h2 id="attributes">Attributes</h2>
<div class="section-content">
<p>This element includes the <a href="../global_attributes">global attributes</a>.</p> <dl> <dt id="disabled"><a href="#disabled"><code>disabled</code></a></dt> <dd> <p>If this Boolean attribute is set, all form controls that are descendants of the <code><fieldset></code>, are disabled, meaning they are not editable and won't be submitted along with the <a href="form"><code><form></code></a>. They won't receive any browsing events, like mouse clicks or focus-related events. By default browsers display such controls grayed out. Note that form elements inside the <a href="legend"><code><legend></code></a> element won't be disabled.</p> </dd> <dt id="form"><a href="#form"><code>form</code></a></dt> <dd> <p>This attribute takes the value of the <a href="../global_attributes#id"><code>id</code></a> attribute of a <a href="form"><code><form></code></a> element you want the <code><fieldset></code> to be part of, even if it is not inside the form. Please note that usage of this is confusing — if you want the <a href="input"><code><input></code></a> elements inside the <code><fieldset></code> to be associated with the form, you need to use the <code>form</code> attribute directly on those elements. You can check which elements are associated with a form via JavaScript, using <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/elements"><code>HTMLFormElement.elements</code></a>.</p> </dd> <dt id="name"><a href="#name"><code>name</code></a></dt> <dd> <p>The name associated with the group.</p> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> The caption for the fieldset is given by the first <a href="legend"><code><legend></code></a> element nested inside it.</p> </div> </dd> </dl>
</div>
<h2 id="styling_with_css">Styling with CSS</h2>
<div class="section-content">
<p>There are several special styling considerations for <code><fieldset></code>.</p> <p>Its <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/display"><code>display</code></a> value is <code>block</code> by default, and it establishes a <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context">block formatting context</a>. If the <code><fieldset></code> is styled with an inline-level <code>display</code> value, it will behave as <code>inline-block</code>, otherwise it will behave as <code>block</code>. By default there is a <code>2px</code> <code>groove</code> border surrounding the contents, and a small amount of default padding. The element has <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size"><code>min-inline-size: min-content</code></a> by default.</p> <p>If a <a href="legend"><code><legend></code></a> is present, it is placed over the <code>block-start</code> border. The <code><legend></code> shrink-wraps, and also establishes a formatting context. The <code>display</code> value is blockified. (For example, <code>display: inline</code> behaves as <code>block</code>.)</p> <p>There will be an anonymous box holding the contents of the <code><fieldset></code>, which inherits certain properties from the <code><fieldset></code>. If the <code><fieldset></code> is styled with <code>display: grid</code> or <code>display: inline-grid</code>, then the anonymous box will be a grid formatting context. If the <code><fieldset></code> is styled with <code>display: flex</code> or <code>display: inline-flex</code>, then the anonymous box will be a flex formatting context. Otherwise, it establishes a block formatting context.</p> <p>You can feel free to style the <code><fieldset></code> and <code><legend></code> in any way you want to suit your page design.</p>
</div>
<h2 id="examples">Examples</h2>
<h3 id="simple_fieldset">Simple fieldset</h3>
<div class="section-content">
<p>This example shows a really simple <code><fieldset></code> example, with a <code><legend></code>, and a single control inside it.</p> <div class="code-example">
<p class="example-header"><span class="language-name">html</span></p>
<pre data-signature="uxxwh/1R8416PsuWyTQliHC7e4bevA/V60DovcMkyms=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>fieldset</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>legend</span><span class="token punctuation">></span></span>Do you agree?<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>legend</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>chbx<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>agree<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Yes!<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>chbx<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>I agree<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>fieldset</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span>
</pre>
</div> <h4 id="result">Result</h4>
<div class="code-example" id="sect2">
<iframe class="sample-code-frame" title="Simple fieldset sample" id="frame_simple_fieldset" width="100%" height="80" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/fieldset/runner.html?id=simple_fieldset" loading="lazy"></iframe>
</div>
</div>
<h3 id="disabled_fieldset">Disabled fieldset</h3>
<div class="section-content">
<p>This example shows a disabled <code><fieldset></code> with two controls inside it. Note how both the controls are disabled due to being inside a disabled <code><fieldset></code>.</p> <div class="code-example">
<p class="example-header"><span class="language-name">html</span></p>
<pre data-signature="0xXMY4R9KV5WR0S4VO4CuKYRMlG6uUCJPK+louFaS1M=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>fieldset</span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>legend</span><span class="token punctuation">></span></span>Disabled login fieldset<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>legend</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Name: <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Chris<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pwd<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Archetype: <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>password<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pwd<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Wookie<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>fieldset</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span>
</pre>
</div> <h4 id="result_2">Result</h4>
<div class="code-example" id="sect3">
<iframe class="sample-code-frame" title="Disabled fieldset sample" id="frame_disabled_fieldset" width="100%" height="110" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/fieldset/runner.html?id=disabled_fieldset" loading="lazy"></iframe>
</div>
</div>
<h2 id="technical_summary">Technical summary</h2>
<div class="section-content"><figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> <a href="../content_categories#flow_content">Flow content</a>, <a href="heading_elements#sectioning_root">sectioning root</a>, <a href="../content_categories#form_listed">listed</a>, <a href="../content_categories#form-associated_content">form-associated</a> element, palpable content. </td> </tr> <tr> <th scope="row">Permitted content</th> <td> An optional <a href="legend"><code><legend></code></a> element, followed by flow content. </td> </tr> <tr> <th scope="row">Tag omission</th> <td>None, both the starting and ending tag are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> Any element that accepts <a href="../content_categories#flow_content">flow content</a>. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/group_role"><code>group</code></a></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td> <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/radiogroup_role"><code>radiogroup</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/presentation_role"><code>presentation</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/none_role"><code>none</code></a> </td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLFieldSetElement"><code>HTMLFieldSetElement</code></a></td> </tr> </tbody> </table></div></figure></div>
<h2 id="specifications">Specifications</h2>
<div class="_table"><table class="standard-table">
<thead><tr><th scope="col">Specification</th></tr></thead>
<tbody><tr><td><a href="https://html.spec.whatwg.org/multipage/form-elements.html#the-fieldset-element">HTML Standard <br><small># the-fieldset-element</small></a></td></tr></tbody>
</table></div>
<h2 id="browser_compatibility">Browser compatibility</h2>
<div class="_table"><table>
<thead>
<tr id="bct-browser-type">
<th></th>
<th colspan="6">Desktop</th>
<th colspan="6">Mobile</th>
</tr>
<tr id="bct-browsers">
<th></th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
<th>WebView Android</th>
<th>Chrome Android</th>
<th>Firefox for Android</th>
<th>Opera Android</th>
<th>Safari on IOS</th>
<th>Samsung Internet</th>
</tr>
</thead>
<tbody>
<tr>
<th><code>fieldset</code></th>
<td class="bc-supports-yes"><details><summary>1</summary>Before version 86, this element did not support <code>flexbox</code> and <code>grid</code> layouts within this element. See <a href="https://crbug.com/262679">bug 262679</a>.</details></td>
<td class="bc-supports-yes"><details><summary>12</summary>Before version 86, this element did not support <code>flexbox</code> and <code>grid</code> layouts within this element. See <a href="https://developer.microsoft.com/microsoft-edge/platform/issues/4511145/">bug 4511145</a>.</details></td>
<td class="bc-supports-yes">1</td>
<td class="bc-supports-yes">Yes</td>
<td class="bc-supports-yes">≤15</td>
<td class="bc-supports-yes">≤4</td>
<td class="bc-supports-yes"><details><summary>4.4</summary>Before version 86, this element did not support <code>flexbox</code> and <code>grid</code> layouts within this element. See <a href="https://crbug.com/262679">bug 262679</a>.</details></td>
<td class="bc-supports-yes"><details><summary>18</summary>Before version 86, this element did not support <code>flexbox</code> and <code>grid</code> layouts within this element. See <a href="https://crbug.com/262679">bug 262679</a>.</details></td>
<td class="bc-supports-yes">4</td>
<td class="bc-supports-yes">≤14</td>
<td class="bc-supports-yes">≤3.2</td>
<td class="bc-supports-yes"><details><summary>1.0</summary>Before version 14.0, this element did not support <code>flexbox</code> and <code>grid</code> layouts within this element. See <a href="https://crbug.com/262679">bug 262679</a>.</details></td>
</tr>
<tr>
<th><code>disabled</code></th>
<td class="bc-supports-yes">20</td>
<td class="bc-supports-yes"><details><summary>12</summary>Does not work with nested fieldsets. For example: <code><fieldset disabled><fieldset><!--Still enabled--></fieldset></fieldset></code></details></td>
<td class="bc-supports-yes">4</td>
<td class="bc-supports-yes"><details><summary>Yes</summary>Not all form control descendants of a disabled fieldset are properly disabled in IE11; see IE <a href="https://connect.microsoft.com/IE/feedbackdetail/view/817488">bug 817488: input[type='file'] not disabled inside disabled fieldset</a> and IE <a href="https://connect.microsoft.com/IE/feedbackdetail/view/962368/can-still-edit-input-type-text-within-fieldset-disabled">bug 962368: Can still edit input[type='text'] within fieldset[disabled]</a>.</details></td>
<td class="bc-supports-yes">12</td>
<td class="bc-supports-yes">6</td>
<td class="bc-supports-yes">4.4</td>
<td class="bc-supports-yes">25</td>
<td class="bc-supports-yes">4</td>
<td class="bc-supports-yes">12</td>
<td class="bc-supports-yes">6</td>
<td class="bc-supports-yes">1.5</td>
</tr>
<tr>
<th><code>form</code></th>
<td class="bc-supports-yes">1</td>
<td class="bc-supports-yes">12</td>
<td class="bc-supports-yes">1</td>
<td class="bc-supports-yes">Yes</td>
<td class="bc-supports-yes">15</td>
<td class="bc-supports-yes">3</td>
<td class="bc-supports-yes">4.4</td>
<td class="bc-supports-yes">18</td>
<td class="bc-supports-yes">4</td>
<td class="bc-supports-yes">14</td>
<td class="bc-supports-yes">2</td>
<td class="bc-supports-yes">1.0</td>
</tr>
<tr>
<th><code>name</code></th>
<td class="bc-supports-yes">19</td>
<td class="bc-supports-yes">12</td>
<td class="bc-supports-yes">4</td>
<td class="bc-supports-yes">Yes</td>
<td class="bc-supports-yes">15</td>
<td class="bc-supports-yes">6</td>
<td class="bc-supports-yes">4.4</td>
<td class="bc-supports-yes">25</td>
<td class="bc-supports-yes">4</td>
<td class="bc-supports-yes">14</td>
<td class="bc-supports-yes">6</td>
<td class="bc-supports-yes">1.5</td>
</tr>
</tbody>
</table></div>
<h2 id="see_also">See also</h2>
<div class="section-content"><ul> <li>The <a href="legend"><code><legend></code></a> element</li> <li>The <a href="input"><code><input></code></a> element</li> <li>The <a href="label"><code><label></code></a> element</li> <li>The <a href="form"><code><form></code></a> element</li> </ul></div><div class="_attribution">
<p class="_attribution-p">
© 2005–2023 MDN contributors.<br>Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.<br>
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset</a>
</p>
</div>
|
