HTML - label 标签

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

打印本页