使用 fieldset 标签有什么好处？答案

【问题标题】：What are the advantages of using the fieldset tag?使用 fieldset 标签有什么好处？
【发布时间】：2011-09-25 02:31:42
【问题描述】：

使用<fieldset>标签有什么好处？

我真的不明白它的用途。

【问题讨论】：

附带说明，它还有助于加强语义 HTML。 en.wikipedia.org/wiki/Semantic_HTML

标签： html fieldset

【解决方案1】：

表单通常分为不同的字段集。

fieldset 标签允许您对字段集进行逻辑分组，以使您的表单更具描述性。

您还会注意到，您可以使用字段集来设置表单样式并显示字段之间的逻辑关联。

就像您在“真实”世界中找到的形式一样。

使用字段集的“优点”是它们允许您以最符合语义的方式标记数据（在本例中为表单）。考虑将字段放在字段集中比将字段放在 div 中更具描述性。 div 不告诉你字段之间的关系，字段集告诉你存在关系。

这与许多新的 HTML5 标签集的原理相似。例如，<footer> 与模棱两可的 <div> 相比，更能说明其中数据的含义。

【讨论】：

456bereastreet.com/archive/200904/… 了解更多信息
总结它只会使代码更具描述性（因为您可以使用<div> 来实现所有其他功能），对吧？
@Diego：与所有 HTML 标记一样，它不是为了“外观”，而是为了描述的内容。当然，我们可以为每个元素使用样式化的<div> - 但那样一切都将同样毫无意义。
所以我的理解是只有当你在同一个表单中多次使用它时它才有用（样式除外）。

【解决方案2】：

如果你看看HTML5 spec for Developers：

http://developers.whatwg.org/forms.html#the-fieldset-element

fieldset 元素代表一个集合表单控件的可选分组使用一个通用名称。

（点击链接可以了解更多信息）

结合legend element，它可以让你轻松做到这一点，如果不使用fieldset/legend，很难重新创建：

【讨论】：

用负边距或位置重新创建相当容易，它为图例标签本身设置样式是不可能的 - 它是那些不遵守规则的“奇怪”标签之一。
@Wesley Murch：如果您可以用文本覆盖顶部边框，这很容易。如果您需要适当的透明度，我坚持我的说法，即这很困难。
@Wesley Murch：我试着自己做 :( stackoverflow.com/questions/5985009/…
理解并同意，你可以让它看起来完全一样是有条件的，只是在提供的示例中没有。当然，如果将背景分配给标题if，它与字段集的父级背景相同，这很容易。我也有 had issues 和图例。
@thirtydot：我真的很希望能够接受这个答案:(.. 无论如何谢谢！！

【解决方案3】：

它允许您对一组相关字段进行分组并给它们一个图例。

<fieldset>
    <legend>Gender</legend>
    <input type="radio" name="gender" id="male" value="male">
    <label for="male">Male</label>
    <input type="radio" name="gender" id="female" value="female">
    <label for="female">Female</label>
<fieldset>

<fieldset>
    <legend>Address</legend>

    <label for="line1">Line 1</label>
    <input name="address1" id="line1">

    <label for="line2">Line 2</label>
    <input name="address2" id="line2">

    <label for="town">Town</label>
    <input name="town" id="town">

    <label for="country">country/label>
    <input name="country" id="country">
</fieldset>

【讨论】：

您会将按钮放在单独的fieldset 中吗？以你上面的例子为例，你觉得提交按钮最好放在哪里？
假设只有一个提交按钮，它将应用于整个表单，而不是与任何子集分组，因此不会有任何字段集。

【解决方案4】：

你用它把东西组合在一起。如果您需要为 CSS 或 JavaScript 访问其中的内容，并且不想为所有内容分配 ID 的麻烦，这很有用。

另外，传说看起来还不错。

【讨论】：

字段集仅用于对多个相关字段进行分组。如果它在字段集中，它应该是输入或与该字段集中的输入直接相关。它们的全部目的是为了语义（主要用于非视觉代理），而不是布局。