HTML - <legend> Tag

A legend tag, which is the element's first child, specifies the caption or title for the <fieldset> tag. It typically rests on top of the frame because it is a caption. A border is drawn around an element's content using the <fieldset> tag. With the help of a fieldset, which also has the ability to describe the context information's, and wrap forms, graphics, and content.

Syntax

Following is the syntax for HTML <legend> tag −

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

Specific Attributes

The HTML <button> tag also supports the following additional attributes −

S.No. Attribute & Description
1

align

(Deprecated) Specifies the content alignment.

Example

In the following example, we are using the HTML <legend> tag to define the caption for its parent <fieldset> tag.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>HTML legend tag</title>
</head>
<body>
   <!--create a fieldset-->
   <fieldset>
      <legend></legend>
   </fieldset>
</body>
</html>

When we run the above code, it will generate an output consisting of the legend field on the webpage.

Example

Following is another example of the HTML <legend> tag. Using the <legend> tag, we are trying to create a caption named "Name" for its parent tag <fieldset.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>HTML legend tag</title>
</head>
<body>
   <!--create a fieldset-->
   <fieldset>
      <legend>Name</legend>
   </fieldset>
</body>
</html>

On running the above code, the output window will pop up displaying the text along legend field on the webpage.

Example

In this example, we are using the HTML <legend> tag to create a caption named "Message" for its parent tag <fieldset>. Using the CSS, we are trying to give some styling to the HTML <legend> tag.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>HTML legend tag</title>
   <style>
      legend {
         color: blue;
         font-size: 25px;
         width: 100px;
         background-color: aquamarine;
      }
   </style>
</head>
<body>
   <!--create a fieldset-->
   <fieldset>
      <legend>Message</legend>
      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Veritatis aspernatur suscipit aliquam eligendi debitis voluptate natus possimus veniam unde magni, nisi, aperiam odit sequi numquam ipsam cupiditate sint ex laborum!</p>
   </fieldset>
</body>
</html>

When we run the above code, it will generate an output consisting of the legend tag applied with a CSS displayed on the webpage.

Example

Considering the following example, we are creating a caption(title) named "User Details" for HTML <fieldset> element using the HTML <legend> tag. The created caption will represent the title of the form.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>HTML legend tag</title>
   <style>
      legend {
         color: rgb(168, 10, 193);
         font-size: 25px;
         width: 200px;
         background-color: rgb(164, 205, 14);
         text-align: center;
      }
   </style>
</head>
<body>
   <!--create a fiedlset-->
   <fieldset>
      <legend>User Details</legend>
      <form>
      <label for="">Username</label>
      <input type="text">
      <br>
      <label for="">Password</label>
      <input type="password">
      <br>
      <button>Submit</button>
      </form>
   </fieldset>
</body>
</html>

On running the above code, the output window will pop up displaying the legend tag used inside the form tag on the webpage.

html_tags_reference.htm
Advertisements