HTML 教程 / 正确关联 label 与 input

input 获得用户的值；label 向用户展示该字段的用途。可靠的显式关联为字段提供 id，并为标签提供相应的 for 值。

将标签与输入字段连接起来

<form method="get">
  <label for="visitor-name">姓名</label>
  <input id="visitor-name" name="name" type="text">
  <button type="submit">检查</button>
</form>

将此代码放入 HTML 文件的 body 中，并在浏览器中打开它。点击“姓名”应该将焦点设置到该字段。仅仅在字段旁边放置文本并不会自动关联它。文档中的 id 必须是唯一的；重复的 ID 可能会导致标签指向错误的字段。

还要按 Tab 以访问该字段，并检查聚焦的元素是否可见。标签是控件的名称，而不仅仅是装饰性文本。辅助技术必须能够识别哪个字段处于焦点状态。

id 和 name 是否执行相同的功能？

属性 id 用于标识文档中的一个元素，并可以将其与标签、片段或脚本关联。name 是在表单提交值时使用的键。这里 visitor-name 是标签的目标，而 name 是提交键。请使用 表单结构和 GET 与 POST 中的数据列表练习，检查提交的名称和请求方法。

如果点击标签没有反应，请将 for 与 id 进行比较。如果输入有效，但提交的 URL 中没有该值，请检查 name。您可以将 id="visitor-name" 更改为 id="person-name"，只要更新标签的 for；name="name" 可以保持不变，如果服务器仍然期望该键。

修复标签与字段的错误关联

<!-- 错误：for 对应 name 而非 id -->
<label for="full_name">姓名</label>
<input id="person-name" name="full_name">

<!-- 正确：for 对应字段标识 -->
<label for="person-name">姓名</label>
<input id="person-name" name="full_name">

在单独的文件中测试片段。在修正后的版本中，点击“姓名”应将焦点设置到 person-name，同时提交的键保持为 full_name。不要将两个示例合并到同一个文档中：这会导致 ID 重复并使比较无效。

占位符文本不能替代标签

placeholder 提供提示或简短示例，当用户输入时会消失。它不能替代永久的字段名称。请保留可见的标签，并单独添加示例。有关与字段关联的永久说明，请参见 在表单字段中添加占位符文本。

<label for="email">电子邮件地址</label>
<input id="email" name="email" type="email"
       placeholder="name@example.com">

即使一个设计在视觉上遮盖了标签，该字段仍然必须具有可访问的名称。复选框和选项按钮也可以嵌套在标签内部，如 <label><input type="checkbox" name="agree"> 我同意</label> 所示。点击标签文本以检查复选框是否会发生变化。在调整外观之前，请选择清晰的表述。关于标签与控件的关联方式，请参阅 MDN 的 label 元素文档。