HTML label 标签：关联 for 与 id，扩大点击范围

HTML <label> 将表单控件的名称与其可见文本和辅助技术关联。将标签的 for 连接到控件的 id，或将控件放在标签内部。点击关联文本可以聚焦输入框或切换复选框。

使用 for 和 id 显式连接控件

for 属性使用同一文档中目标控件的 id，而不是其 name。id 在文档中必须是唯一的，而 name 用于标识提交数据中的字段。即使布局将 label 和 input 分开，当 for 和 id 匹配时，它们的命名关系仍然可以保持完整。

将以下文档保存为 labels.html 并在浏览器中打开。文本输入使用 for；复选框使用一个包裹的标签。这是一个界面练习，不会向服务器提交数据。

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>比较 label 的关联方式</title>
</head>
<body>
  <h1>表单控件的名称</h1>
  <p>
    <label for="reader-name">显示名称</label>
    <input id="reader-name" name="reader" type="text"
           aria-describedby="name-help" placeholder="例如：天空">
  </p>
  <p id="name-help">请输入要在屏幕上显示的昵称。</p>
  <p>
    <label>
      <input type="checkbox" name="tips" value="yes">
      接收学习资讯
    </label>
  </p>
</body>
</html>

1. 点击 显示名称 将光标放入输入框。输入文字后，占位符消失，但标签仍然可见。
2. 点击文本 接收学习资讯 来选择复选框，然后再次点击以取消勾选。你不需要精确点击小复选框。
3. 使用 Tab 在控件之间移动，使用空格键切换复选框，同时检查键盘交互。

包裹的标签和辅助描述起不同的作用

在 label 中放置 input 会在没有 for 的情况下创建一个隐式关联。只在一个 label 中包含相关控件，并且不要在其中嵌套另一个 label。在 label 包裹控件的同时，也可以使用 id 和 for，但 for 必须指向所包含的控件。为了与辅助技术和外部工具兼容，值得考虑显式的 for/id 关联。

标签是告诉读者输入内容的名称。将补充说明或错误信息放在单独的段落中，并与 aria-describedby 关联。在示例中，请输入要在屏幕上显示的昵称。 对名称进行补充；占位符不能用作标签的替代。

当关联或点击不工作时

检查 for 中的拼写错误和大小写差异、重复的 id 值，以及目标元素的类型。将 for 指向无法加标签的元素（例如 hidden 输入框）不会使其像普通输入框那样工作。标签也适用于 select 和 textarea；使用 fieldset 和 legend 对相关选项组命名。

在标签内放置独立的链接或按钮可能会让用户不清楚点击是导航还是选择控件。请将额外的链接放在外部，并先解释上下文。使用 CSS 样式化标签，而不是仅通过插入标题元素来放大它。MDN 的 label 元素参考 描述了支持的控件和创作要求。