HTML - <legend> 標籤

HTML <legend> 標籤用於指定<fieldset> 元素的標題。它通常位於框架頂部，因為它是一個標題。<fieldset> 標籤用於在元素內容周圍繪製邊框，我們可以在該邊框上使用 <legend> 標籤設定標題。它透過遵循 legend 標籤設定的標題來幫助我們識別包裝的組。

語法

<legend>.......</legend>

屬性

HTML legend 標籤支援 HTML 的全域性和事件屬性。以及下面列出的特定屬性。

屬性	值	描述
align	left right center justify	用於水平設定元素的對齊方式。

HTML legend 標籤示例

以下示例將說明 legend 標籤的用法。何時、何地以及如何使用它來建立標題，以及如何使用 CSS 對該標題進行樣式設定。

使用 <legend> 標籤建立標題

在以下示例中，我們使用 HTML <legend> 標籤為其父 <fieldset> 標籤定義標題。legend 標籤可用於任何元素以提供標題，但最好與 fieldset 元素一起使用。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML legend tag</title>
</head>
<body>
   <fieldset>
      <!-- Using legend Tag to Create Caption -->
      <legend>Caption</legend>
   </fieldset>
</body>
</html>

使用 CSS 設定標題樣式

在此示例中，我們使用 HTML <legend> 標籤為其父標籤 <fieldset> 建立一個名為“Message”的標題。使用 CSS，我們嘗試為 HTML <legend> 標籤設定一些樣式。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML legend tag</title>
   <style>
      legend {
         color: blue;
         font-size: 25px;
         width: 100px;
         background-color: aquamarine;
         padding-left: 5px;
      }
   </style>
</head>
<body>
   <fieldset>
      <!-- Using legend Tag to Create Caption -->
      <legend>Message</legend>
      <p>
          Tutorials Point is an online learning platform providing free tutorials,
          paid premium courses, and eBooks. Learn the latest technologies and 
          programming languages SQL, MySQL, Python, C, C++, Java, Python, PHP,
          Machine Learning, data science, AI, Prompt Engineering and more.
      </p>
   </fieldset>
</body>
</html>

登入表單上的標題

考慮以下示例，我們使用 HTML <legend> 標籤為 HTML <fieldset> 元素建立一個名為“使用者詳細資訊”的標題（標題）。建立的標題將表示表單的標題。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML legend tag</title>
   <style>
      legend {
         color: rgb(168, 10, 193);
         font-size: 25px;
         width: 100px;
         background-color: rgb(164, 205, 14);
      }
      fieldset{
          width: 50%;
      }
      label{
          font-size: 24px;
      }
      input {
          border-radius: 5px;
          width: 95%;
      }
   </style>
</head>
<body>
   <fieldset>
      <!-- Using legend Tag to Create Caption 
           and align attribute to align the caption -->
      <legend align="center">Login</legend>
        <form>
        <label for="">Username</label>
        <br>
        <input type="text">
        <br>
        <label for="">Password</label>
        <br>
        <input type="password">
        <br><br>
        <button>Submit</button>
      </form>
   </fieldset>
</body>
</html>

支援的瀏覽器

標籤
legend	是	是	是	是	是

html_tags_reference.htm

列印頁面