HTML label 语法
在 HTML 中，label 标签用于在表单控件旁边添加说明性文字，让用户更清楚输入框、按钮或选择项的作用。
label 标签一般用于将某个表单元素和某段说明文字关联起来，从而提升表单的可用性和可访问性。
语法：
<label for="表单ID">说明性文字</label>说明：
label 标签 for 属性的值为所关联的表单元素的 id，例如 <label for="txt"></label> 表示这个 label 标签跟 id="txt" 的表单元素是关联起来的。
label 标签的 for 属性有以下 2 个作用。
- 语义上绑定了 label 元素和表单元素。
- 增强了鼠标可用性。也就是说，我们点击 label 中的文本的时候，其所关联的表单元素也会获得焦点。
label 标签可以与以下表单控件相关联：
HTML label 摘要
| 属于 | HTML 表单 |
|---|---|
| 使用频率 | 高 |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
HTML label 示例
接下来，我们通过几个简单的例子来讲解一下 HTML label 标签是如何使用的。
示例 1：label 标签的基本用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div>
<input id="rdo1" type="radio">单选框
<input id="cbk1" type="checkbox">复选框
</div>
<hr>
<div>
<input id="rdo2" name="rdo" type="radio"/><label for="rdo2">单选框</label>
<input id="cbk2" name="cbk" type="checkbox"><label for="cbk2">复选框</label>
</div>
</body>
</html>页面效果如下图所示。
分析：
在第 1 组表单中，我们只能点击单选框才能选中单选框，点击它旁边的说明文字是不能选中的。但在第 2 组表单中，我们不仅可以通过点击单选框来选中单选框，通过点击它旁边的说明文字同样也可以选中单选框。而对于复选框来说，也是一样的。
其实，这就是 label 标签 for 属性的作用。for 属性使得鼠标单击的范围扩大到 label 元素上，极大地提高了用户单击的可操作性。事实上，label 标签有 2 种关联方式，我们拿复选框来说，下面 2 种方式是等价的。
<!--方式 1（显式关联）-->
<input id="cbk" type="checkbox"><label for="cbk">复选框</label>
<!--方式 2（隐式关联）-->
<label><input type="checkbox">复选框</label>在实际开发中，我们更推荐使用 “隐式关联” 这种方式。
示例 2：label 标签的更多使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form method="post" action="/">
<div>登录绿叶网</div>
<p>
<label>账号：<input type="text" name="username"></label>
</p>
<p>
<label>密码：<input type="password" name="password"></label>
</p>
<p>
<label><input type="checkbox">记住我</label>
<button type="submit">登录</button>
</p>
</form>
</body>
</html>页面效果如下图所示。
分析：
当点击 “记住我” 文本时，label 标签所绑定的复选框就会被选中。
