先记住这个答案
<label> 把可见文字与具体表单控件关联起来，点文字也能操作控件，读屏时还能得到它的名称。显式关联靠 for 对应控件唯一的 id；把控件包在标签内是另一种关联方式。只有文字靠得近并不建立语义关系，复制组件时尤其要检查 id 是否重复。
for对应控件的唯一id- 点击标签也能操作控件
- 控件可放在标签内部
- placeholder 不替代 label
邮箱字段为什么读不出名称
注册页显示“电子邮箱”几个字，旁边一个空输入框。如果没有关联，键盘或读屏用户进入输入框时可能只听到“编辑框”，不知道该填什么。把 label 的 for 指向输入框的 id，再用 name 作为提交字段名。for 和 name 不是同一件事：前者建立标签关系，后者用于表单数据。
<label for="email">电子邮箱</label>
<input id="email" name="email" type="email">
<label>
<input name="agree" type="checkbox">同意服务条款
</label>
<!-- 显式和隐式关联都可以 -->标签关联会扩大可点击区域，也为控件建立可访问名称。
示例的邮箱采用显式 for 关联，勾选框采用把控件包进标签的隐式关联；两种方式都让点击文字时操作对应控件。对于邮箱，点击标签会把焦点移到输入框；对于勾选框，点击“同意服务条款”会切换状态。可在浏览器里直接点击文字验证，再用读屏软件检查控件名称；若只靠 CSS 把文字摆在旁边，这两个检验都可能失败。
for 关联标签与控件
显式关联时，一个文档中的 id 应唯一，for 指向正确控件；隐式关联依靠标签包住控件。占位文字 placeholder 不是标签的可靠替代：用户输入后它会消失，读屏与认知体验也不稳定。需要更详细的提示或错误消息时，可在标签之外提供说明，再用合适的描述关系关联，而不是把所有说明挤进标签文本。
点击标签文字能扩大实际可点击区域，尤其对较小的复选框有帮助。若组件列表每行都复制 id="email"，多个标签的 for 可能指向错误输入框；动态生成表单时应给每个实例稳定而唯一的 id。占位符不能代替标签：一旦用户输入，提示消失，读屏也未必把它作为可靠名称。
隐式关联虽然可用，但复杂组件常把图标、提示按钮一起塞进标签，点击区域和读屏名称可能变得混乱。显式 for 与 id 的写法更容易让输入框和标签分开放置，却也更需要保证唯一性。无论用哪种方式，错误提示还要另行关联到控件，标签本身不能告诉用户“格式不正确”的详细原因。
容易答错的地方
- 用
name替代id来写for for对应的是控件id，name用于表单提交字段名。- 只写 placeholder 不写标签
- 占位文字会消失，且不能稳定承担控件名称。
面试官还会怎么问？
一组单选按钮的题目该怎么写？
每个按钮各有标签，整组可用 fieldset 和 legend 提供题目。
可以一个控件对应多个标签吗？
可以，多个标签能指向同一个控件，但要避免重复或混乱的可访问名称。
点击 label 没反应先查什么？
检查 for 与 id 是否完全对应、id 是否重复，以及控件是否可交互。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。