- <label> 标签表示用户界面中某个元素的说明，用于关联 <input> 标签，一个 input 可以与多个标签相关联
- 将一个 <label> 和一个 <input> 元素相关联主要有这些优点：
- 标签文本不仅与其相应的文本输入元素在视觉上相关联，程序中也是如此。 这意味着，当用户聚焦到这个表单输入元素时，屏幕阅读器可以读出标签，让使用辅助技术的用户更容易理解应输入什么数据。
- 你可以点击关联的标签来聚焦或者激活这个输入元素，就像直接点击输入元素一样。这扩大了元素的可点击区域，让包括使用触屏设备在内的用户更容易激活这个元素。
|
属性 |
说明 |
|
for |
即和 <label> 元素在同一文档中的 可关联标签的元素 的 id <label> 元素可同时有一个 for 属性和一个子代控件元素，只是 for 属性需要指向这个控件元素 |
|
form |
表示与 label 元素关联的 <form> 元素（即它的表单拥有者）。如果声明了该属性，其值应是同一文档中 <form> 元素的 id。因此你可以将 label 元素放在文档的任何位置，而不仅作为 <form> 元素的后代 |
示例
|
<!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head>
<body> <label for="name">Name:</label> <input type="text" id="name"> </body>
</html> |
浏览器运行结果如下：
注
将一个 <label> 和一个 <input> 元素匹配在一起，你需要给 <input> 一个 id 属性。而 <label> 需要一个 for 属性，其值和 <input> 的 id 一样。
另外，你也可以将 <input> 直接放在 <label> 里，此时则不需要 for 和 id 属性，因为关联已隐含存在
来自 <https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/label>