HTML - legend 标签

HTML <legend> 标签用于指定 <fieldset> 元素的标题。它通常位于框架的顶部，因为它是一个标题。使用 <fieldset> 标签在元素的内容周围绘制边框，在该边框上，我们可以使用 <legend> 标签设置标题。它帮助我们通过遵循图例标签设置的标题来识别包装的组。

语法


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

属性

<legend> 标签支持 HTML 的全局属性和事件属性。以及下面列出的特定属性。

属性	值	描述
align	left right center justify	这用于设置元素的水平对齐方式。

<legend> 标签示例

下面的示例将说明<legend> 标签的用法。在哪里、何时以及如何使用它来创建标题，以及我们如何使用 CSS 设置该标题的样式。

使用 <legend> 标签创建标题

在以下示例中，我们使用 <legend> 标签来定义其父 <fieldset> 标记的标题。<legend> 标签可用于任何元素以提供标题，但最好将其与字段集元素一起使用。


<!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 设置<legend> 标签的样式

在此示例中，我们使用 <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>
          QikepuCom is an online learning platform providing free QikepuCom,
          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> 元素创建一个名为 “User Details” 的标题（title）。创建的标题将表示表单的标题。


<!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>	Yes	Yes	Yes	Yes	Yes

打印本页