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

问题描述 投票:148回答:9

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

我抬头对W3Schools的一些信息,其中说:

  • 所述<fieldset>标记用于在窗体组相关的元素。
  • <fieldset>标签吸引周围的相关元素的盒子。

对于那些谁误以为“为什么它在规范存在”为“它做什么”更多的解释。我想画的部分是无关紧要的,我不明白为什么我们需要一个特殊的标签只是为了组中的一些形式的相关元素。

html fieldset
9个回答
175
投票

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

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

这允许每一个无线电按钮,同时还提供该组作为一个整体的标签进行标记。这一点尤其重要,其中正在使用辅助技术(如屏幕阅读器),其中控制和其图例的关联不能被视觉呈现来暗示。


32
投票

字段集的另一个特点是,禁用它禁止所有它所包含的字段。

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

24
投票

它需要的辅助功​​能。

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

在HTML 4个元素fieldsetlegend让你布局和组织大型形式的以逻辑方式兴趣许多不同的领域,而无需使用表。该fieldset标签可以用来创建一个围绕选定的元素框和legend标签将给出一个标题为那些元素。以这种方式形式元件可被一起分组到识别的类别。

不同的浏览器可能会以不同方式显示的默认fieldset边界。层叠样式表可以用来删除边框或改变其外观。


14
投票

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


5
投票

字段集组织在形式逻辑上的项目,但它也提高了无障碍对于那些谁使用听觉的浏览器。字段集是很方便的,因此它在许多应用在过去是非常受欢迎的,使他们在HTML中实现这一点。


5
投票

我喜欢它,当你周围的无线电设备与字段集,和你不把ID对您的单选按钮输入标签,然后由字段集所代表的组添加到tabchain,如果它是一个单一的项目。

这使您可以通过标签形式,当你到一个字段,你可以使用箭头键来更改选定电台,然后按TAB键离开时,你就大功告成了。

另外,不要忘记可访问性。屏幕阅读器需要以了解您的形式,并且能够读取其关闭,以在某种自然的方式,用户字段集+传奇。随意消失的传说,如果你不想让视力正常的用户看到它。布局和造型传说恰到好处的CSS有时是冒险的跨浏览器尤其是与传统的浏览器,所以我觉得做的传说标签为屏幕阅读器用户不可见,并增加一个独立的,ARIA隐藏=“真”的风格就像一个标签跨度视力正常的用户使事情变得简单的风格,并保持接近的东西。


2
投票

我觉得很方便CSS样式和标签来控制关联。它可以很容易地把一个可视容器周围的一组字段和对齐的标签。


2
投票

我使用的字段集分组的形式输入,所以当我有一个庞大的形式,并希望打破它在某种形式的向导。

这个同样的问题得到的回答here上SO。


2
投票

只是总结的一些优点:

的HTML <fieldset>元件,因为它是由<label>定义的web表单中用来将若干控制以及标签(MDN)。

换句话说:该字段集标签可以让你为了你的表格是更具描述性的逻辑分组字段集。因此,一组表单控件的下一个共同的名字可选组合。

<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更具描述。股利不能告诉你字段之间的关系,一个字段告诉你是有关系的。
  • 通过使用禁用的,它可以让你一次过禁用及其所有内容。
  • 它有助于accessibility
© www.soinside.com 2019 - 2024. All rights reserved.