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

为什么需要<fieldset>标签？无论其目的是可能是form标签的子集。

我在W3Schools上查找了一些信息，其中说：

• 该<fieldset>标记用于在窗体组相关的元素。
• 该<fieldset>标签绘制围绕相关元素的盒子。

对于那些将“为什么它存在于规范中”误认为“它做什么”的人更多的解释。我认为绘图部分无关紧要，并且我不明白为什么我们只需要一个特殊标签来将表单中的一些相关元素分组。

最明显的实际示例是：

<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>

这使每个单选按钮都可以被标记，同时还可以为整个组提供一个标签。这在使用辅助技术（例如屏幕阅读器）的情况下尤其重要，在这种情况下，视觉表示无法暗示控件及其图例的关联。

fieldset的另一个功能是禁用它会禁用其中包含的所有字段。

<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>

辅助功能需要它。

检出：http : //usability.com.au/2013/04/accessible-forms-1-labels-and-identification/

在HTML 4个元素fieldset，并legend让您的布局和组织大型形式的以逻辑方式兴趣许多不同的领域，而无需使用表。该fieldset标签可以用来创建一个围绕选定的元素盒和legend标签将给出一个标题为那些元素。通过这种方式，表单元素可以组合在一起成为已识别的类别。

不同的浏览器可能fieldset以不同的方式显示默认边框。级联样式表可用于删除边框或更改其外观。

如上所述这里，这个标签的目的是提供清晰的形式组织，并允许装修表单元素设计师更容易获得。

Fieldset逻辑上以表格形式组织项目，但它也提高了使用听觉浏览器的人员的可访问性。Fieldset方便使用，因此过去在许多应用程序中非常流行，因此他们也使用html实现了它。

我喜欢这样，当您将收音机与字段集一起使用，并且没有在单选按钮输入标签上放置id时，该字段集所代表的组将被添加到标签链中，就好像它是单个项一样。

这使您可以浏览表单，当您进入字段集时，可以使用箭头键来更改选定的单选，然后在完成时退出。

另外，不要忘记可访问性。屏幕阅读器需要fieldset + legend才能理解您的表单，并能够以某种自然的方式将其阅读给用户。如果您不希望视力障碍的用户看到图例，请随时将其消失。使用CSS正确放置和设置图例样式有时会成为跨浏览器的麻烦，尤其是对于旧版浏览器而言，因此，我发现使图例标记对于屏幕阅读器用户不可见，并添加了一个单独的aria-hidden =“ true”跨度，其样式类似于标签目光敏锐的用户使事情变得简单易懂，并使事物易于访问。

对于CSS样式和将标签与控件相关联，我觉得很方便。这样可以轻松地将可视容器放在一组字段周围并对齐标签。

当我有一个巨大的表单并想在某种形式的向导中分解时，我使用字段集对表单输入进行分组。

在SO上回答了相同的问题。

仅总结一些优点：

HTML  <fieldset> 元素用于对MDN<label>定义的Web表单中的多个控件以及标签（）进行分组。

换句话说：fieldset标记使您可以对字段集进行逻辑分组，以使表单更具描述性。因此，有一组表单控件（可选）以通用名称分组。

<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>

使用字段集的“ 优点 ”是：

• 它们允许您以最可用的语义方式标记数据（在这种情况下为表单）。考虑到将字段放在字段集中比将字段放在div中更具描述性。div不会告诉您有关字段之间关系的任何信息，而字段集则告诉您存在关系。
• 通过使用disable，它允许您一次性禁用和其所有内容。
• 对辅助功能很有帮助

对我来说，<fieldset>...</fieldset>元素的最大优点之一是<form>...</form>即使上下文<fieldset>...</fieldset>不在表单中也可以保留上下文。

例如，以下形式：

<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>

在语义上与以下形式相同：

<form>
    <input type="text" name="someInput">
    <input type="text" name="someInput1">
</form>