HTML验证报错：label元素for属性需对应非隐藏表单控件ID求助

错误原因 #

你遇到的报错是因为<label>标签的for属性取值必须对应一个非隐藏表单控件的id属性值，你代码中<label for="title">Title:</label>的for值为title，但下方所有名称为title的单选按钮仅设置了name="title"，没有任何一个控件的id属性为title，匹配不到对应的表单控件，所以触发校验失败。

修复方案 #

有两种常用的修复方式可选：

方案1：给每个单选按钮添加独立id，拆分标签对应

给每个单选按钮设置唯一id，将选项文字分别用<label>包裹关联对应控件，点击文字就能选中对应选项，无障碍适配性更好：

<td>
  Title:
  <label for="title_mr">Mr.</label><input type="radio" name="title" id="title_mr" tabindex="-1">
  <label for="title_mrs">Mrs.</label><input type="radio" name="title" id="title_mrs">
  <label for="title_ms">Ms.</label><input type="radio" name="title" id="title_ms">
  <label for="title_dr">Dr.</label><input type="radio" name="title" id="title_dr">
</td>

方案2：将所有内容嵌套进同一个<label>标签

如果不需要单独关联每个选项，直接把“Title:”文字和所有单选按钮都包裹在同一个<label>标签内，不需要设置for属性也能合法生效：

<td>
  <label>
    Title:
    Mr.<input type="radio" name="title" tabindex="-1">
    Mrs.<input type="radio" name="title">
    Ms.<input type="radio" name="title">
    Dr.<input type="radio" name="title">
  </label>
</td>

另外你代码中“Agree to Terms:”这行文字也没有关联对应的表单控件，如果需要符合HTML规范和无障碍要求，也可以参照上面的方法做对应优化。

内容的提问来源于stack exchange，提问作者Landon Byrd