HTML<label>标签用于表示UI(用户界面)中项目的标题,或向表单控件添加标签,如文本,textarea,复选框,单选按钮等。
for 属性是 <label> 标签的默认属性,它将在创建 <label> 标签时自动添加。可以为多个标签元素的 for 属性赋予相同的值。
要显式关联 <label> 元素与 <input> 元素,首先需要向 <input> 元素添加 id 属性。接下来,将 for 属性添加到 <label> 标签中,其中 for 属性的值与 <input> 元素中的 id 相同。
语法
<label> ... </label>
属性
<label>标签支持 HTML 的 全局属性 和 事件属性。也接受一些特定的属性,这些属性在下面列出。
<label>标签示例
下面示例将说明<label>标签的用法,在表单上在哪里、何时以及如何使用它。
创建<label>标签元素
在下面的程序中,我们将使用 <label> 标签在 HTML 中创建一个不包含任何属性的标签。
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Label tag</title>
</head>
<body>
<label>Your name: </label>
</body>
</html>
<label>标签的css样式
以下是 HTML <label> 标签的另一个示例。在这里,我们使用 <label> 标签创建一个表,并使用 CSS 为其赋予样式。
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Label tag</title>
<style>
label {
font-size: 20px;
font-style: italic;
color: green;
}
</style>
</head>
<body>
<label for="name">Name: </label>
</body>
</html>
将<label>包含到表单中
在此程序中,我们将使用 <label> 标签为表单字段创建标签。我们使用 for 属性,该值将与表单字段的 id 相同。
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Label tag</title>
<style>
form {
width: 250px;
height: 180px;
border: 1px solid green;
}
label {
color: blueviolet;
font-size: 20px;
}
</style>
</head>
<body>
<form>
<label for="uname">Username: </label>
<input type="text" id='uname'>
<br>
<label for="lang">Chose languages: </label>
<br>
<input type="checkbox" id='english'>
<label for="english">English</label>
<br>
<input type="checkbox" id='hindi'>
<label for="hindi">Hindi</label>
<br>
<label for="intro">Your short intro....</label>
<br>
<textarea id='intro'></textarea>
</form>
</body>
</html>
支持的浏览器
| 浏览器 | ![]() |
![]() |
![]() |
![]() |
![]() |
|---|---|---|---|---|---|
| <label> | Yes | Yes | Yes | Yes | Yes |






