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

正如here所述，此标记的目的是为表单的组织提供清晰度，并允许设计人员更轻松地访问装饰表单元素。

Answer 5

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

Answer 6

我喜欢当你使用fieldset包围你的收音机，并且你没有把id放在你的单选按钮输入标签上时，那么由fieldset表示的组会被添加到tabchain中，好像它一样是一个单项。

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

另外，不要忘记可访问性。屏幕阅读器需要字段集+图例才能理解您的表单，并能够以某种自然的方式将其读取给用户。如果您不希望有视力的用户看到它，请随意消失该传奇。使用CSS布置和设计传奇恰好是有趣的跨浏览器，特别是对于旧版浏览器，因此我发现使屏幕阅读器用户看不见图例标记并添加单独的，aria-hidden =＆＃34; true＆＃34; span风格像一个有视力的用户的标签，使事情变得简单，并使事情可以访问。

Answer 7

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

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

Answer 9

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

在SO上回答了here同样的问题。

Answer 10

仅概述一些优点：

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

换句话说： 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>

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

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

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

10 个答案: