HTML - <label> 标签

HTML <label> 标签用于表示 UI（用户界面）中项目的标题，或为表单控件（如文本、文本区域、复选框、单选按钮等）添加标签。

for 属性是 <label> 标签的默认属性，在创建 <label> 标签时会自动添加。多个 label 元素可以为其 for 属性赋予相同的值。

要显式地将 <label> 元素与 <input> 元素关联，首先需要向 <input> 元素添加 id 属性。接下来，向 <label> 标签添加 for 属性，其中 for 属性的值与 <input> 元素中的 id 相同。

语法

<label> ... </label>

属性

HTML label 标签支持 HTML 的全局和事件属性。并接受一些特定的属性，如下所示。

属性	值	描述
form	form_id	它指定 label 所属的一个或多个表单。
for	element_id	指定此 label 所针对的输入控件。此值必须与输入控件的“id”属性中的值相同。

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 元素样式

以下是 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	是	是	是	是	是

html_tags_reference.htm

打印页面