使用复选框组处理 ID 的语义适当方式

Question

我正在制作一个冗长的表格，其中包含用户可以检查多个答案的问题。基本代码如下（我使用 Semantic UI 进行基本样式设置）：

<form class="ui form new-form" action="#" method="get">
    <div class="ui form">
        <label>What fruits do you like?</label>
        <div class="field">
            <div class="ui checkbox">
                <input type="checkbox" tabindex="0" name="fruits" value="apples">
                <label>apples</label>
            </div>
        </div>
        <div class="field">
            <div class="ui checkbox">
                <input type="checkbox" tabindex="0" name="fruits" value="bananas">
                <label>bananas</label>
            </div>
        </div>
        <div class="field">
            <div class="ui checkbox">
                <input type="checkbox" tabindex="0" name="fruits" value="dylan-carty">
                <label>pears</label>
            </div>
        </div>
    </div>
</form>

我想使用 for/id for accessibility reasons.

应用我的标签

在这种情况下，顶部标签 ("What fruits do you like?") 指的是整个复选框集。如果这是一个 select/option 集，我知道您会将 ID 应用于包含的 <select> 标记。我看到有三种可能的解决方案。

将所有复选框放在 <div> 中，并为其赋予与 "What fruits do you like?" 标签中的 for 值相同的 ID。为每个复选框标签提供与其输入相匹配的 ID。这只剩下语义 UI 现有的复选框样式，但我不知道它是语义。
将所有复选框放入 <fieldset> 标签中，并为其指定与 "What fruits do you like?" 标签中的 for 值相同的 ID。为每个复选框标签提供与其输入相匹配的 ID。这对我来说似乎更语义化，但由于语义 UI 给出了 <fieldset> 一种样式，因此我需要覆盖该样式。
将 "What fruits do you like?" 标签包裹在整组复选框周围，如方法 1 here 所示。

研究：

搜索了包含 "multiple checkboxes" 的问题，但大多数问题处理的是每个复选框都是不同的，而不是较大组的一部分，或者如何 select 它们
一般搜索 "best practices checkbox group id" 并确实找到了 this，这表明将 <legend> 放在 <fieldset> 中。但是，我不想对所有其他输入使用 <label>，而是切换到仅用于复选框组的 <legend> 标签。

在这种情况下是否有普遍接受的"best practice"？

JSFiddle here

Answer 1

从语义的角度，你的研究已经给了你答案。

使用 fieldset 和 legend。

当谈到语义时，忽略默认样式，无论是原生 HTML 还是您正在使用的任何 css 框架。

fieldset 和 legend 标签正是为此目的而设计的。如果你想迂腐，理论上表单的全部内容也应该包含在带有 legend 的 fieldset 标签中，因为你 "superset" 字段。

对您的 HTML 进行最少的更改，您会想要这样的东西：

<form class="ui form new-form" action="#" method="get">
  <div class="ui form">
    <fieldset>
      <legend>What fruits do you like?</legend>
      <div class="field">
        <div class="ui checkbox">
          <input type="checkbox" tabindex="0" name="fruits" value="apples" id="fruit_apples">
          <label for="fruit_apples">apples</label>
        </div>
      </div>
      <div class="field">
        <div class="ui checkbox">
          <input type="checkbox" tabindex="0" name="fruits" value="bananas" id="fruit_bananas">
          <label for="fruit_bananas">bananas</label>
        </div>
      </div>
      <div class="field">
        <div class="ui checkbox">
          <input type="checkbox" tabindex="0" name="fruits" value="dylan-carty" id="fruit_pears">
          <label for="fruit_pears">pears</label>
        </div>
      </div>
    </fieldset>
  </div>
</form>

现在您需要将 CSS 调整为适合您的设置。

棘手的部分来了。 Web 开发和编程通常是一种平衡行为。很高兴知道什么是 "best practices"，但了解这些是指南而非规则也很重要。为了保持您的工作的可维护性和可交付性，由您决定要保留和忽略这些指南中的内容。

我会怎么做？根据提供的信息，使用 fieldset 和 legend。

使用复选框组处理 ID 的语义适当方式

Semantically appropriate way to handle IDs with groups of checkboxes

html

forms

label

semantic-markup