HTML <label> 标签
示例
三个带有标签的单选按钮
<form action="/action_page.php">
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label><br><br>
<input type="submit" value="提交">
</form>
自己动手试一试 »
定义和用法
<label>
标签定义了多个元素的标签
- <input type="checkbox">
- <input type="color">
- <input type="date">
- <input type="datetime-local">
- <input type="email">
- <input type="file">
- <input type="month">
- <input type="number">
- <input type="password">
- <input type="radio">
- <input type="range">
- <input type="search">
- <input type="tel">
- <input type="text">
- <input type="time">
- <input type="url">
- <input type="week">
- <meter>
- <progress>
- <select>
- <textarea>
正确使用上述元素的标签将有利于
- 屏幕阅读器用户(当用户聚焦于某个元素时,屏幕阅读器会大声朗读该标签)
- 难以点击非常小区域(例如复选框)的用户——因为当用户点击
<label>
元素中的文本时,它会切换输入(这增加了点击区域)。
提示和注释
提示:<label>
的 for 属性必须等于相关元素的 id 属性才能将它们绑定在一起。 通过将元素放在 <label>
元素内部,也可以将标签绑定到元素。
浏览器支持
元素 | |||||
---|---|---|---|---|---|
<label> | 是 | 是 | 是 | 是 | 是 |
属性
Attribute | 值 | 描述 |
---|---|---|
for | element_id | 指定标签应绑定到的表单元素的 id |
form | form_id | 指定标签所属的表单 |
全局属性
<label>
标签也支持 HTML 中的全局属性。
事件属性
<label>
标签也支持 HTML 中的事件属性。
相关页面
HTML DOM 参考: Label 对象
默认 CSS 设置
大多数浏览器将 <label>
元素显示为以下默认值