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

Question

为什么我们需要<fieldset>标签？它服务的目的可能是表单标签的一个子集.

我在W3Schools上查了一些信息,其中说:

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

更多解释那些误解"为什么它存在于规范中"为"它做什么"的人.我认为绘图部分是无关紧要的,我不明白为什么我们需要一个特殊的标签来分组表格中的一些相关元素.

Answer 1

最明显,最实用的例子是:

<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">Red</label>

</fieldset>

这允许标记每个单选按钮,同时还为整个组提供标签.这在使用辅助技术(例如屏幕阅读器)时尤为重要,其中控件及其图例的关联不能通过视觉呈现来暗示.

Answer 2

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>

Answer 3

它是可访问性所必需的.

查看:http: //usability.com.au/2013/04/accessible-forms-1-labels-and-identification/

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

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

Answer 4

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

Answer 5

对我来说，<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>

Answer 6

Fieldset在逻辑上组织表单中的项目,但它也改善了使用听觉浏览器的人的可访问性.Fieldset很方便,因此它在过去很多应用程序中非常流行,所以他们也用html实现了它.

Answer 7

我喜欢当你使用fieldset包围你的无线电时,并且你没有将id放在你的单选按钮输入标签上,然后由fieldset表示的组被添加到tabchain,好像它是一个单独的项目.

这使您可以在表单中进行选项卡,当您到达字段集时,可以使用箭头键更改所选的收音机,然后在完成后标记.

另外,不要忘记可访问性.屏幕阅读器需要字段集+图例才能理解您的表单,并能够以某种自然的方式将其读取给用户.如果您不希望有视力的用户看到它,请随意消失该图例.使用CSS布置和设计传奇恰好是有趣的跨浏览器,尤其是传统浏览器,因此我发现屏幕阅读器用户无法看到图例标签,并添加了一个单独的,aria-hidden ="true"范围,样式为标签视力好的用户可以简化风格并保持可访问性.

Answer 8

简单总结一些优点：

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 没有告诉你字段之间的关系，字段集告诉你有一个关系。
• 通过使用disabled，它允许您一次性禁用 及其所有内容。
• 它有助于可访问性