label 标签的作用是什么

label 标签来定义表单控制间的关系，当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。

解析：两种用法：一种是 id 绑定，一种是嵌套。

<!-- 方式一：通过 for 关联 input 的 id -->
<label for="Name">Number:</label>
<input type="text" name="Name" id="Name" />

<!-- 方式二：嵌套 -->
<label>Date:<input type="text" name="B" /></label>

补充

补充：label 看似只是一个小标签，但配合 input 后能显著提升表单的可用性与可访问性。

主要作用

  1. 扩大点击区域：点击 label 文字就能让对应 input 获得焦点，对单选框 / 复选框尤其友好
  2. 屏幕阅读器识别：把 label 与 input 关联后，读屏软件会读出字段名
  3. 语义化结构：明确表达"标签 - 输入项"的对应关系

关联方式

  • for 属性值对应 input 的 id（推荐，结构清晰）
  • 直接把 input 嵌套在 label 内部（更简单，但耦合度高）

易错点

  • 一个 input 上不要绑多个 label，会让屏幕阅读器行为不一致
  • 表单提交时只用 name 取值，不要用 label 的文本

来源整理自：我的有道云笔记