标记单选和复选框元素

Question

标记复选框和单选元素的最合适、语义正确的方法是什么？显然，给每个人一个唯一的id 属性是一种选择，并在 id 中使用<label for="">，但这似乎会破坏语义分组。将未封闭的文本放在 input 元素旁边似乎......错误。

编辑： 此外，应该如何表示一组此类元素的标签？ （即不是每个选项的描述，而是整个组的描述）

Answer 1

使用<label for=""> 是正确的方法。单选按钮的分组是通过 name 属性表示组和通过 id 属性表示单个元素来完成的。例如：

<input type="radio" name="rbg" id="rbg1"><label for="rbg1">Button One</label><br>
<input type="radio" name="rbg" id="rbg2"><label for="rbg2">Button Two</label><br>
<input type="radio" name="rbg" id="rbg3"><label for="rbg3">Button Three</label><br>

至于将标签放在整个组上，只需将它们放在一个容器中，该容器在按钮（或复选框）堆栈上方有一个文本容器。示例：

<div>
  <h3>My Radio Button Group</h3>
  <input type="radio" name="rbg" id="rbg1"><label for="rbg1">Button One</label><br>
  <input type="radio" name="rbg" id="rbg2"><label for="rbg2">Button Two</label><br>
  <input type="radio" name="rbg" id="rbg3"><label for="rbg3">Button Three</label><br>
</div>