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

Question

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

我在 W3Schools 上查找了一些信息，上面写着：

• <fieldset> 标签用于对表单中的相关元素进行分组。
• <fieldset> 标签在相关元素周围绘制一个框。

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

原文由 Eastern Monk 发布，翻译遵循 CC BY-SA 4.0 许可协议

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">Blue</label>

</fieldset>

这允许标记每个单选按钮，同时还为整个组提供标签。当使用辅助技术（如屏幕阅读器）时，视觉呈现无法暗示控件及其图例的关联，这一点尤其重要。

原文由 Quentin 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>

原文由 Collin Price 发布，翻译遵循 CC BY-SA 3.0 许可协议