blocks|key|3112482|text|我发现CSS样式设置和将标签与控件关联起来很方便。它使得在一组字段周围放置可视化容器并对齐标签变得很容易。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3112483|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>I find it handy for CSS styling and associating labels to controls.  It makes it easy to put a visual container around a group of fields and align the labels.</p>


blocks|key|3112522|text|Fieldset在逻辑上组织表单中的项，但它也提高了使用听觉浏览器的人的可访问性。Fieldset很方便，因此它在过去的许多应用程序中非常受欢迎，所以他们也用html实现了它。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3112523|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>Fieldset organizes items in forms logically but it also improves the accessibility for those who use aural browsers.
Fieldset is handy and thus it was hugely popular in the past in many applications so they implemented it in html too.</p>


blocks|key|2898324|text|最明显、最实际的例子是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2898325|​|2898326|<fieldset>
++<legend>Colour</legend>

++<input+type="radio"+name="colour"+value="red"+id="colour_red">
++<label+for="colour_red">Red</label>

++<input+type="radio"+name="colour"+value="green"+id="colour_green">
++<label+for="colour_green">Green</label>

++<input+type="radio"+name="colour"+value="blue"+id="colour_blue">
++<label+for="colour_blue">Blue</label>

</fieldset>|code-block|syntax|javascript|2898327|2898328|这允许对每个单选按钮进行标记，同时还为整个组提供一个标签。在使用辅助技术(如屏幕阅读器)时，这一点尤其重要，因为在这种情况下，控件与其图例的关联不能通过可视化表示来暗示。|2898329|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>The most obvious, practical example is:</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;fieldset&gt;
  &lt;legend&gt;Colour&lt;/legend&gt;

  &lt;input type="radio" name="colour" value="red" id="colour_red"&gt;
  &lt;label for="colour_red"&gt;Red&lt;/label&gt;

  &lt;input type="radio" name="colour" value="green" id="colour_green"&gt;
  &lt;label for="colour_green"&gt;Green&lt;/label&gt;

  &lt;input type="radio" name="colour" value="blue" id="colour_blue"&gt;
  &lt;label for="colour_blue"&gt;Blue&lt;/label&gt;

&lt;/fieldset&gt;</code></pre>
</div>
</div>
</p>
<p>This allows each radio button to be labeled while also providing a label for the group as a whole. This is especially important where assistive technology (such as a screen reader) is being used where the association of the controls and their legend cannot be implied by visual presentation.</p>


blocks|key|2898352|text|正如here所描述的，此标记的目的是为表单的组织提供清晰度，并允许设计者更容易地访问修饰表单元素。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2898353|entityMap|0|LINK|mutability|MUTABLE|url|http://www.graphicrating.com/2008/11/17/fieldset-legend-tags-in-web-design/^0|2|4|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

<p>As described <a href="http://www.graphicrating.com/2008/11/17/fieldset-legend-tags-in-web-design/" rel="noreferrer">here</a>, the purpose of this tag is to provide clarity to the organization of the form and allow a designer easier access to decorate form elements.</p>


blocks|key|2898375|text|它是可访问性所必需的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2898376|查看：http://usability.com.au/2013/04/accessible-forms-1-labels-and-identification/|offset|length|2898377|HTML4元素fieldset和legend允许您以一种逻辑的方式布局和组织具有许多不同感兴趣区域的大型表单，而无需使用表格。fieldset标记可用于在所选元素周围创建框，legend标记将为这些元素提供标题。通过这种方式，可以将表单元素一起分组到确定的类别中。|style|CODE|2898378|不同的浏览器可能会以不同的方式显示默认fieldset边框。级联样式表可用于删除边框或更改其外观。|2898379|entityMap|0|LINK|mutability|MUTABLE|url|http://usability.com.au/2013/04/accessible-forms-1-labels-and-identification/^0|0|3|25|0|0|7|8|G|6|1R|8|2F|6|0|J|8|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@]|9|@$D|V|E|W|1|X]]|A|$]]|$1|F|3|G|5|6|7|Y|8|@$D|Z|E|10|H|I]|$D|11|E|12|H|I]|$D|13|E|14|H|I]|$D|15|E|16|H|I]]|9|@]|A|$]]|$1|J|3|K|5|6|7|17|8|@$D|18|E|19|H|I]]|9|@]|A|$]]|$1|L|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]]|M|$N|$5|O|P|Q|A|$R|S]]]]

<p>It's needed for accessibility.</p>

<p>Check out:
<a href="http://usability.com.au/2013/04/accessible-forms-1-labels-and-identification/" rel="noreferrer">http://usability.com.au/2013/04/accessible-forms-1-labels-and-identification/</a></p>

<p>The HTML 4 elements <code>fieldset</code> and <code>legend</code> allow you to layout and organise a large form with many different areas of interest in a logical way without using tables. The <code>fieldset</code> tag can be used to create boxes around selected elements and the <code>legend</code> tag will give a caption to those elements. In this way form elements can be grouped together into identified categories.</p>

<p>Different browsers may display the default <code>fieldset</code> border in different ways. Cascading Style Sheets can be used to remove the border or change its appearance.</p>


blocks|key|2898400|text|当我有一个很大的表单，并且想要在某种表单向导中将其拆分时，我会使用字段集对表单输入进行分组。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2898401|同样的问题也在SO上得到了here的回答。|offset|length|2898402|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/314457/does-the-use-of-the-fieldset-html-tag-have-meaning-beyond-grouping-forms^0|0|D|4|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@$D|P|E|Q|1|R]]|A|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|M]]]]

<p>I use fieldsets to group form inputs, when I have a huge form and want to break it up in a sort of form wizard.</p>

<p>This same questions was answered <a href="https://stackoverflow.com/questions/314457/does-the-use-of-the-fieldset-html-tag-have-meaning-beyond-grouping-forms">here</a> on SO.</p>


blocks|key|232272|text|我喜欢这样:当你用fieldset包围你的收音机时，你没有在你的单选按钮输入标签上放id，那么fieldset所代表的组就会被添加到标签链中，就像它是一个单独的项目一样。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|232273|这允许您在表单中使用tab键，当您到达字段集时，您可以使用箭头键更改选定的单选按钮，然后在完成时按tab键离开。|232274|另外，别忘了可访问性。屏幕阅读器需要fieldset%2Blegend才能理解表单，并能够以某种自然的方式将表单读给用户听。如果您不想让有视力的用户看到图例，可以随时将其消失。布局和样式图例恰到好处地与CSS有时是冒险的跨浏览器，特别是在传统的浏览器，所以我发现让屏幕阅读器用户看不见图例标记，并添加一个单独的，aria-hidden="true“跨度，样式类似于有视力的用户的标签，使样式变得简单，并保持可访问性。|232275|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

<p>I like it that when you surround your radios with fieldset, and you don't put id's on your radio button input tags, then the group represented by the fieldset is added to the tabchain as if it was a single item.</p>

<p>This lets you tab through a form, and when you get to a fieldset, you can use arrow keys to change the selected radio, and then tab away when you're done.</p>

<p>Also, don't forget accessibility.  Screen readers need fieldset+legend in order to understand your form and be able to read it off to the user in some sort of natural way.  Feel free to disappear the legend if you don't want sighted users to see it.  Laying out and styling legend just right with CSS is sometimes dicey cross-browsers especially with legacy browsers, so I find making the legend tag invisible for screen reader users and adding a separate, aria-hidden="true" span styled like a label for sighted users makes things simple to style and keeps things accessible.</p>


blocks|key|237735|text|fieldset的另一个特性是禁用它会禁用其中包含的所有字段。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|237736|​|237737|<fieldset+disabled>
++<legend>Disabled+Fields</legend>
++<input+type="text"+value="Sample">
++<textarea>Text+Area</textarea>
</fieldset>

<fieldset>
++<legend>Enabled+Fields</legend>
++<input+type="text"+value="Sample">
++<textarea>Text+Area</textarea>
</fieldset>|code-block|syntax|javascript|237738|237739|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p>Another feature of fieldset is that disabling it disables all of the fields contained within it.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;fieldset disabled&gt;
  &lt;legend&gt;Disabled Fields&lt;/legend&gt;
  &lt;input type="text" value="Sample"&gt;
  &lt;textarea&gt;Text Area&lt;/textarea&gt;
&lt;/fieldset&gt;

&lt;fieldset&gt;
  &lt;legend&gt;Enabled Fields&lt;/legend&gt;
  &lt;input type="text" value="Sample"&gt;
  &lt;textarea&gt;Text Area&lt;/textarea&gt;
&lt;/fieldset&gt;</code></pre>
</div>
</div>
</p>


blocks|key|232299|text|仅总结了一些优点：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|232300|MDN定义的HTML和<fieldset>元素用于对web表单中的多个控件和标签(<label>)进行分组。|offset|length|style|CODE|232301|换句话说:+fieldset标记允许您对字段集进行逻辑分组，以便您的表单更具描述性。因此，可以选择将一组表单控件分组到一个通用名称下。|232302|​|232303|<fieldset>
++<legend>Choose+your+favorite+animal</legend>

++<input+type="radio"+id="dog"+name="animal">
++<label+for="dog">Dog</label><br/>

++<input+type="radio"+id="cat"+name="animal">
++<label+for="cat">Cat</label><br/>
</fieldset>|code-block|syntax|javascript|232304|232305|使用字段集的"advantages“包括：|BOLD|232306|232307|它们允许你以最semantic的方式标记你的数据(在这个例子中是一个表单)。考虑一下，将字段放在字段集中比将字段放在div中更具描述性。accessibility|unordered-list-item|232308|没有告诉你任何字段之间的关系，字段集告诉你有一个使用disabled的，它允许你一次性禁用及其所有内容。|232309|它对div很有帮助|232310|232311|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset|1|https://www.w3schools.com/html/html5_semantic_elements.asp|2|https://www.accessibility-developer-guide.com/examples/forms/grouping-with-fieldset-legend/^0|0|B|A|15|7|0|3|0|0|0|0|0|0|7|A|0|0|7|8|1|1W|D|2|0|Q|8|0|0|0^^$0|@$1|2|3|4|5|6|7|1F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1G|8|@$D|1H|E|1I|F|G]|$D|1J|E|1K|F|G]]|9|@$D|1L|E|1M|1|1N]]|A|$]]|$1|H|3|I|5|6|7|1O|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|1P|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|1Q|8|@]|9|@]|A|$O|P]]|$1|Q|3|K|5|6|7|1R|8|@]|9|@]|A|$]]|$1|R|3|S|5|6|7|1S|8|@$D|1T|E|1U|F|T]]|9|@]|A|$]]|$1|U|3|-4|5|6|7|1V|8|@]|9|@]|A|$]]|$1|V|3|W|5|X|7|1W|8|@]|9|@$D|1X|E|1Y|1|1Z]|$D|20|E|21|1|22]]|A|$]]|$1|Y|3|Z|5|6|7|23|8|@$D|24|E|25|F|T]]|9|@]|A|$]]|$1|10|3|11|5|X|7|26|8|@]|9|@]|A|$]]|$1|12|3|-4|5|6|7|27|8|@]|9|@]|A|$]]|$1|13|3|-4|5|6|7|28|8|@]|9|@]|A|$]]]|14|$15|$5|16|17|18|A|$19|1A]]|1B|$5|16|17|18|A|$19|1C]]|1D|$5|16|17|18|A|$19|1E]]]]

<p>Just summarising some advantages: </p>

<p>The HTML <code>&lt;fieldset&gt;</code> element is used to group several controls as well as labels (<code>&lt;label&gt;</code>) within a web form as it is defined by <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset" rel="noreferrer">MDN</a>.</p>

<p>In other words: <em>The fieldset tag allows you to logically group sets of fields in order that your forms be more descriptive.</em> So, 
 a set of form controls optionally grouped under a common name.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;fieldset&gt;
  &lt;legend&gt;Choose your favorite animal&lt;/legend&gt;

  &lt;input type="radio" id="dog" name="animal"&gt;
  &lt;label for="dog"&gt;Dog&lt;/label&gt;&lt;br/&gt;

  &lt;input type="radio" id="cat" name="animal"&gt;
  &lt;label for="cat"&gt;Cat&lt;/label&gt;&lt;br/&gt;
&lt;/fieldset&gt;</code></pre>
</div>
</div>
</p>

<p>The "<strong><em>advantages</em></strong>" of using a fieldset are:</p>

<ul>
<li>they allow you to mark up your data (in this case a form) in the most <a href="https://www.w3schools.com/html/html5_semantic_elements.asp" rel="noreferrer">semantic</a> way available. Consider that placing your fields in a fieldset is more descriptive than placing your fields in a div. The div tells you nothing about the relationship between the fields, a fieldset tells you there is a relationship.</li>
<li>by using <strong><em>disabled</em></strong>, it allows you to disable the  and all its contents in one go.</li>
<li>it's helpful to <a href="https://www.accessibility-developer-guide.com/examples/forms/grouping-with-fieldset-legend/" rel="noreferrer">accessibility</a> </li>
</ul>


blocks|key|232359|text|对我来说，<fieldset>...</fieldset>元素的最大优点之一是即使<fieldset>...</fieldset>不在表单中，也能够保留<form>...</form>上下文。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|232360|例如，以下形式：|232361|<div+class="header">
++++<form+id="myForm">
++++++++<input+type="text"+name="someInput">
++++</form>
</div>

<div+class="footer">
++++<fieldset+form="myForm">
++++++++<input+type="text"+name="someInput1">
++++</fieldset>
</div>|code-block|syntax|javascript|232362|在语义上与以下形式相同：|232363|<form>
++++<input+type="text"+name="someInput">
++++<input+type="text"+name="someInput1">
</form>|232364|entityMap^0|5|O|15|O|24|G|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Z|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|10|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|11|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|12|8|@]|D|@]|E|$K|L]]|$1|Q|3|-4|5|6|7|13|8|@]|D|@]|E|$]]]|R|$]]

<p>As for me, one of the biggest advantages of the <code>&lt;fieldset&gt;...&lt;/fieldset&gt;</code> element is the ability to preserve <code>&lt;form&gt;...&lt;/form&gt;</code> context even if the <code>&lt;fieldset&gt;...&lt;/fieldset&gt;</code> is not inside the form. </p>

<p>For example, the following form:</p>

<pre><code>&lt;div class="header"&gt;
    &lt;form id="myForm"&gt;
        &lt;input type="text" name="someInput"&gt;
    &lt;/form&gt;
&lt;/div&gt;

&lt;div class="footer"&gt;
    &lt;fieldset form="myForm"&gt;
        &lt;input type="text" name="someInput1"&gt;
    &lt;/fieldset&gt;
&lt;/div&gt;
</code></pre>

<p>is semantically identical to the following form:</p>

<pre><code>&lt;form&gt;
    &lt;input type="text" name="someInput"&gt;
    &lt;input type="text" name="someInput1"&gt;
&lt;/form&gt;
</code></pre>


blocks|key|2898604|text|字段集用于accessibility，organize，并具有更清晰的表单。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|2898605|我发现包装radios非常方便，其中radios的标题是用户将选择的数据库字段(在州下面的示例中)，尤其是在诸如textarea之类的字段中。|CODE|2898606|这是因为我不会放置标签，而是使用标签作为title+/+label。|2898607|下面是一个非常简单的pure.css示例|2898608|​|2898609|<link+rel="stylesheet"+href="https://unpkg.com/purecss@2.0.6/build/pure-min.css"+integrity="sha384-Uu6IeWbM%2BgzNVXJcM9XV3SohHtmWE%2B3VGi496jvgX1jyvDTXfdK%2BrfZc8C1Aehk5"+crossorigin="anonymous">

<div+class="pure-g"+style="++++position:+relative;
top:+50%25;
left:+50%25;
transform:+translate(-18%25);
}">
++++<div+class="pure-u-5-5">
++++++++<form+class="pure-form"+method="get"+action="#">

++++++++++++<fieldset+name="field-set-main">
++++++++++++++++<legend>Create+A+Project</legend>
++++++++++++++++<input+type="text"+placeholder="Name"+/>
++++++++++++++++<div>
++++++++++++++++++++<input+type="datetime-local"+placeholder="Date+Start"+/>
++++++++++++++++++++<input+type="datetime-local"+placeholder="Date+End"+/>
++++++++++++++++</div>
++++++++++++</fieldset>

++++++++++++<fieldset+name="field-set-state">
++++++++++++++++<legend>State</legend>
++++++++++++++++<span>
++++++++++++++++++++++++<input+type="radio"+id="stateDraft"+name="state"+value="draft"+checked>
++++++++++++++++++++++++<label+for="stateDraft">Draft</label>
++++++++++++++++++++</span>
++++++++++++++++<span>
++++++++++++++++++++++++<input+type="radio"+id="stateProgress"+name="state"+value="in_progress">
++++++++++++++++++++++++<label+for="stateProgress">In+Progress</label>
++++++++++++++++++++</span>
++++++++++++++++<span>
++++++++++++++++++++++++<input+type="radio"+id="stateDone"+name="state"+value="done">
++++++++++++++++++++++++<label+for="done">Done</label>
++++++++++++++++++++</span>
++++++++++++++++<span>
++++++++++++++++++++++++<input+type="radio"+id="stateDiscarded"+name="state"+value="discarded">
++++++++++++++++++++++++<label+for="discarded">Discarded</label>
++++++++++++++++++++</span>
++++++++++++</fieldset>

++++++++++++<fieldset+name="field-set-description">
++++++++++++++++<legend>Description</legend>
++++++++++++++++<textarea+id="story"+name="description"
++++++++++++++++++++++++++rows="5"+cols="30"+placeholder="Write+Description+here.."+style="width=100;">

++++++++++++++++</textarea>
++++++++++++</fieldset>

++++++++++++<fieldset+name="field-set-control">
++++++++++++++++<legend>Action</legend>
++++++++++++++++<button+type="submit"+class="pure-button+pure-button-primary">Submit</button>
++++++++++++++++<button+type="submit"+class="pure-button+pure-button-danger">Cancel</button>
++++++++++++</fieldset>
++++++++</form>
++++</div>
</div>|code-block|syntax|javascript|2898610|2898611|entityMap|0|LINK|mutability|MUTABLE|url|https://purecss.io/forms/^0|5|D|J|8|0|1K|8|0|0|A|8|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@$9|13|A|14|B|C]|$9|15|A|16|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|17|8|@$9|18|A|19|B|H]]|D|@]|E|$]]|$1|I|3|J|5|6|7|1A|8|@]|D|@]|E|$]]|$1|K|3|L|5|6|7|1B|8|@]|D|@$9|1C|A|1D|1|1E]]|E|$]]|$1|M|3|N|5|6|7|1F|8|@]|D|@]|E|$]]|$1|O|3|P|5|Q|7|1G|8|@]|D|@]|E|$R|S]]|$1|T|3|N|5|6|7|1H|8|@]|D|@]|E|$]]|$1|U|3|-4|5|6|7|1I|8|@]|D|@]|E|$]]]|V|$W|$5|X|Y|Z|E|$10|11]]]]

<p>The fieldset is used for <strong>accessibility</strong>, <strong>organize</strong> and have a <strong>clearer</strong>
form.</p>
<p>I found quite handy to wrap up radios where the title of the radios is what database field the user would choose (in the example below the <em>state</em>) but especially in fields such as the <code>textarea</code>.</p>
<p>That's because I would not put a label but instead use the  tag as title / label.</p>
<p>Below a very simple example with <a href="https://purecss.io/forms/" rel="nofollow noreferrer">pure.css</a></p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css" integrity="sha384-Uu6IeWbM+gzNVXJcM9XV3SohHtmWE+3VGi496jvgX1jyvDTXfdK+rfZc8C1Aehk5" crossorigin="anonymous"&gt;

&lt;div class="pure-g" style="    position: relative;
top: 50%;
left: 50%;
transform: translate(-18%);
}"&gt;
    &lt;div class="pure-u-5-5"&gt;
        &lt;form class="pure-form" method="get" action="#"&gt;

            &lt;fieldset name="field-set-main"&gt;
                &lt;legend&gt;Create A Project&lt;/legend&gt;
                &lt;input type="text" placeholder="Name" /&gt;
                &lt;div&gt;
                    &lt;input type="datetime-local" placeholder="Date Start" /&gt;
                    &lt;input type="datetime-local" placeholder="Date End" /&gt;
                &lt;/div&gt;
            &lt;/fieldset&gt;

            &lt;fieldset name="field-set-state"&gt;
                &lt;legend&gt;State&lt;/legend&gt;
                &lt;span&gt;
                        &lt;input type="radio" id="stateDraft" name="state" value="draft" checked&gt;
                        &lt;label for="stateDraft"&gt;Draft&lt;/label&gt;
                    &lt;/span&gt;
                &lt;span&gt;
                        &lt;input type="radio" id="stateProgress" name="state" value="in_progress"&gt;
                        &lt;label for="stateProgress"&gt;In Progress&lt;/label&gt;
                    &lt;/span&gt;
                &lt;span&gt;
                        &lt;input type="radio" id="stateDone" name="state" value="done"&gt;
                        &lt;label for="done"&gt;Done&lt;/label&gt;
                    &lt;/span&gt;
                &lt;span&gt;
                        &lt;input type="radio" id="stateDiscarded" name="state" value="discarded"&gt;
                        &lt;label for="discarded"&gt;Discarded&lt;/label&gt;
                    &lt;/span&gt;
            &lt;/fieldset&gt;

            &lt;fieldset name="field-set-description"&gt;
                &lt;legend&gt;Description&lt;/legend&gt;
                &lt;textarea id="story" name="description"
                          rows="5" cols="30" placeholder="Write Description here.." style="width=100;"&gt;

                &lt;/textarea&gt;
            &lt;/fieldset&gt;

            &lt;fieldset name="field-set-control"&gt;
                &lt;legend&gt;Action&lt;/legend&gt;
                &lt;button type="submit" class="pure-button pure-button-primary"&gt;Submit&lt;/button&gt;
                &lt;button type="submit" class="pure-button pure-button-danger"&gt;Cancel&lt;/button&gt;
            &lt;/fieldset&gt;
        &lt;/form&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


<p>Why do we need a <code>&lt;fieldset&gt;</code> tag? Whatever purpose it serves is probably a subset of the form tag. </p>

<p>I looked up some info on W3Schools, which says:</p>

<ul>
<li>The <code>&lt;fieldset&gt;</code> tag is used to group related elements in a form.</li>
<li>The <code>&lt;fieldset&gt;</code> tag draws a box around the related elements.</li>
</ul>

<p>More explanation for those who are mistaking "why it exists in specification" for "what it does". 
I think the drawing part is irrelevant, and I don't see why we need a special tag just to group some related elements in a form. </p>


Why do we need a fieldset tag?

数据库

容器

为什么我们需要一个<fieldset>标签？无论它的用途是什么，它都可能是form标签的一个子集。我在W3Schools上查找了一些信息，上面写着： <fieldset>标记用于对表单中的相关元素进行分组。 <fieldset>标记在相关元素周围绘制一个方框。对于那些将“为什么它存在于规范中”误认为是“它做了什么”的人...

问为什么我们需要一个fieldset标签？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么我们需要一个fieldset标签？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么我们需要一个fieldset标签？
EN