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

列印頁面