为什么我们需要fieldset标签？

129

为什么我们需要<fieldset>标签？无论它用于何种目的，可能都是表单标签的一个子集。为什么我们需要fieldset标签？

我抬头对W3Schools的一些信息，它说：

的<fieldset>标签用于在表单组相关的元素。
<fieldset>标记围绕相关元素绘制一个框。

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

来源

2012-03-16 Eastern Monk

+25

为什么我们需要任何标签？为什么我们需要一个img标签，当我们可以用1px的div创建一个具有背景色的图片时？ – Oded 2012-03-16 16:53:38

+104

请注意：[W3C]（http://www.w3.org/）与w3schools没有任何关系。 – 2012-03-16 16:54:46

+65

不要参考w3schools。只需使用MDN：[fieldset @ MDN]（https://developer.mozilla.org/en/HTML/Element/fieldset）。 – Sirko 2012-03-16 16:54:55

140

最明显的，实际的例子是：

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

这允许每一个无线电按钮，同时还提供该组作为一个整体的标签进行标记。这在使用辅助技术（例如屏幕阅读器）的情况下尤为重要，因为在视觉呈现中不能隐含控件与图例的关联。

来源

2012-03-16 16:57:49 Quentin

我没有方便的链接，但很显然，许多屏幕阅读器在字段集中的每个*标签之前都阅读了图例文本。 – 2012-03-16 16:59:47

@Madmartigan - 这是一件好事，这意味着你知道你仍然在处理同一组单选按钮。（这也是确保图例简洁的原因）。 – Quentin 2012-03-16 17:01:37

“辅助技术”，这很有意义。 – 2012-03-16 20:06:59

我发现它适用于CSS样式并将标签与控件相关联。它可以很容易地将可视容器放在一组字段周围并对齐标签。

来源

2012-03-16 16:57:07

Fieldset以逻辑方式组织项目，但它也提高了使用听觉浏览器的人的可访问性。 Fieldset非常方便，因此它在过去很受欢迎，因此它们在html中也实现了它。

来源

2012-03-16 16:57:47

如here所述，此标记的目的是为表单的组织提供清晰性，并允许设计者更容易地访问装饰表单元素。

来源

2012-03-16 16:58:06 dthagard

它是无障碍需要的。

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

的HTML 4个元素fieldset和legend让你布局和组织大型形式的以逻辑方式兴趣许多不同的领域，而无需使用表。 fieldset标签可用于围绕选定元素创建框，legend标签将为这些元素提供标题。通过这种方式，表单元素可以组合在一起形成确定的类别。

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

来源

2012-03-16 16:58:10

我使用fieldset将表单输入分组，当我有一个巨大的表单并想要在某种形式向导中分解它时。

这个问题在SO上的回答是here。

来源

2012-03-16 16:58:42

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

这可让您通过表格选项卡，当您进入字段集时，您可以使用箭头键更改选定的收音机，然后在完成时将标签页移开。

此外，不要忘记无障碍。屏幕阅读器需要fieldset + legend来理解你的表单，并能够以某种自然的方式将其读取给用户。如果你不希望有远见的用户看到它，请随意消失。使用CSS布局和样式化图例有时是跨浏览器，特别是对于传统浏览器，所以我发现使屏幕阅读器用户不可见的图例标记，并添加一个单独的，aria-hidden =“true”有远见的用户可以让事物变得简单，并且让事物易于访问。

来源

2014-09-02 21:17:55 DWoldrich

'这可以让你选择一个表格，当你到达一个字段集时，你可以使用箭头键来改变所选择的广播，然后在你完成之后将其标记掉。' - 这是无线电输入的默认行为，与fieldsets无关。默认情况下，复选框的行为不同。 – 2017-09-11 03:42:16

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>

来源

2017-05-30 15:45:15

为什么我们需要fieldset标签？

回答

相关问题