HTML <label> 元素

HTML <label> 元素表示用户界面中一个项目的标题。

带有两个输入字段和相关标记的简单 HTML 表单:

<form action="/plays/html-form-submit">
  <label for="male"></label>
  <input type="radio" name="sex" id="male" value="male"><br>
  <label for="female"></label>
  <input type="radio" name="sex" id="female" value="female"><br>
  <input type="submit" value="提交">
</form>

尝试一下 »

截图

带有两个输入字段和相关标记的简单 HTML 表单

特性

内容类别 流式内容短语内容交互内容表单相关内容可触知内容
允许的内容 短语内容,但子元素不能有 label 元素。不允许使用标签控件以外的可标记元素。
标签省略 不允许,开始标签和结束标签都不能省略。
允许的父元素 任何接受短语内容的元素。
允许的 ARIA 角色
DOM 接口 HTMLLabelElement

属性

该元素包含了全局属性

for

与标签元素在同一文档中的可标签的表单相关元素的 ID。文档中第一个与 for 属性的值相匹配的元素是该标签元素的标记的控件

只要 for 属性指向当前元素包含的控件元素,标签元素就可以同时具有 for 属性和一个控制元素。

form

HTML5 已过时 HTML5

与标签相关联的表单元素(其表单所有者)。如果指定,属性的值是同一文档中 <form> 元素的 ID。这样可以将标签元素放在文档的任何位置,而不仅仅是作为表单元素的后代。

该内容属性已于 2016 年 4 月 28 日从 HTML 规范中删除。然而,脚本仍然可以访问只读的 HTMLLabelElement.form 属性;它返回了标签关联的控件的表单,如果标签没有关联的控件,或者是控件不在表单中,则返回 null

事件属性

<label> 元素支持所有 HTML事件属性

使用注意

  • 可以通过将控件元素放置在 <label> 元素内,或者使用 for 属性将 <label> 与控件相关联。这样的控件称为标签元素的标记的控件。一个控件可以与多个标签相关联。
  • 标签本身并不直接与表单相关联。它们仅通过与它们相关联的控件间接地与表单相关联。

更多实例

简单的标签实例

<label>点我<input type="text"></label>

尝试一下 »

截图

简单的标签实例

使用 “for” 属性

<label for="username">点我</label>
<input type="text" id="username">

尝试一下 »

截图

使用 “for” 属性

规范

规范 状态 备注
HTML Living Standard
<label> 的定义
现行的标准 -
HTML5
<label> 的定义
推荐 -
HTML 4.01 Specification
<label> 的定义
推荐 初始定义

HTML 4.01 与 HTML5 之间的差异

form 属性是 HTML5 的新属性,但又废弃了。

桌面浏览器兼容性

特性 Chrome Edge Firefox Internet Explorer Opera Safari
基础支持 支持 支持 支持 支持 支持 支持
for 支持 支持 支持 支持 支持 支持
form 支持 支持 支持 — 49 支持 支持 支持

移动浏览器兼容性

特性 Android Chrome for Android Edge mobile Firefox for Android IE mobile Opera Android iOS Safari
基础支持 支持 支持 支持 支持 支持 支持 支持
for 支持 支持 支持 支持 支持 支持 支持
form 支持 支持 支持 支持 — 49 支持 支持 支持

相关链接