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

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

我查了一下W3School的一些信息,其中说:

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

这是需要的可访问性。

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

HTML 4元素fieldsetlegend允许您在不使用表格的情况下以合理的方式布局和组织一个包含许多不同感兴趣区域的大表单。 fieldset标签可以用来围绕选定的元素创build框, legend元素将给这些元素一个标题。 通过这种方式,表单元素可以被分组在一起成为确定的类别。

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

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

fieldset的另一个function是禁用它将禁用in中包含的所有字段。

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

我喜欢当你用fieldset环绕你的收音机,并且不把id放在你单选button的input标签上,那么由fieldset表示的组就会被添加到tabchain,就好像它是一个单独的项目一样。

这样,您可以通过表单进行select,当您到达某个字段集时,可以使用箭头键更改选定的广播,然后在完成后将其退出。

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

Fieldset以逻辑方式组织项目,但它也提高了使用听觉浏览器的人员的可访问性。 Fieldset非常方便,因此它在很多应用程序中都非常stream行,所以它们也在html中实现。

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

我使用fieldset将表单input分组,当我有一个巨大的forms,并希望打破它在一种forms向导。

在这里也回答了同样的问题。