HTML表单中label的for属性与name属性搭配使用问题咨询

问题1：单选按钮场景下for属性的作用是什么？ #

HTML规范中，label的for属性作用和表单元素类型无关，统一是与指定id的表单元素建立绑定关系：

• 绑定后点击label文本，等价于点击对应表单元素，对单选按钮来说就是会自动选中绑定的选项，大幅提升操作便利性，用户不用精准点选很小的单选框圆点，点对应文字就能选中。
• 绑定关系会被屏幕阅读器识别，朗读label文本时会提示对应表单控件的类型，提升无障碍访问能力。

问题2：这段代码是否合法？for和name设为相同值有什么作用？ #

• 这段代码不符合HTML规范，属于错误写法：for属性的值必须匹配对应表单元素的id属性，而不是name属性。你给出的示例中没有id="status"的元素，所以这个label没有绑定任何控件，点击“Status:”文本不会触发任何单选框的选中操作，完全没有起到label的作用。
• 单选框的name属性的作用是给单选框分组，同一name值的单选框同一时间只能选中一个，和for属性没有任何关联。示例里的for="status"只是作者的笔误，和name="status"重合没有任何符合规范的特殊作用。

单选按钮组的正确绑定写法 #

如果要给整个单选组加标题，应该用<legend>标签，每个单选框单独绑定自己的label：

<fieldset>
  <legend>Status:</legend>
  <input type="radio" id="pending" name="status">
  <label for="pending">Pending</label>

  <input type="radio" id="resolved" name="status">
  <label for="resolved">Resolved</label>

  <input type="radio" id="rejected" name="status">
  <label for="rejected">Rejected</label>
</fieldset>

内容的提问来源于stack exchange，提问作者Aditya Singh