Html 用一组复选框处理ID的语义上合适的方法

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

你喜欢什么水果？
苹果
香蕉
梨

我想使用for/id应用我的标签

在本例中，顶部标签（“您喜欢什么水果？”）指的是整套复选框。如果这是一个选择/选项集，我知道您会将ID应用于包含

标记。我认为有三种可能的解决办法

将所有复选框置于

中，并为其指定与“您喜欢什么水果？”标签中的

值相同的ID。为每个复选框标签指定与其输入匹配的ID。这使得语义UI的现有样式仅用于复选框，但我不知道它是语义的

将所有复选框放入

标签中，并为其指定与“您喜欢什么水果？”标签中的

值相同的ID。为每个复选框标签指定与其输入匹配的ID。这在我看来更具语义，但由于语义UI提供了
一种样式，因此我需要覆盖该样式

如方法1所示，将“你喜欢什么水果？”标签环绕在整组复选框周围

研究：

• 搜索包含“多个复选框”的问题，但大多数问题处理的是每个复选框都不同的情况，而不是大组的一部分，或者是如何选择它们
• 搜索了“最佳实践复选框组id”，并找到了，这建议将
  放在
  中。但是，我不希望对所有其他输入使用
  ，而只为复选框组切换到
  标记

在这种情况下，是否有普遍接受的“最佳实践”

---

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

使用

字段集

和

图例

当涉及到语义时，忽略默认样式，不管是原生HTML还是您正在使用的任何css框架

字段集

和

图例

标记正是为此而设计的。如果你想学究气，理论上表单的全部内容也应该包装在一个

字段集

标签中，标签上有一个

图例

，因为这是字段的“超集”

对HTML进行最小更改时，您可能会希望：

你喜欢什么水果？
苹果
香蕉
梨

在语义方面没有最佳实践，但您似乎走对了方向，请继续阅读-

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