HTML legend Tag

HTML<legend>Tag: The HTML<legend>tag specifies a caption for the <fieldset> element. The HTML legend tag is used to define the title for the child contents. The legend elements are parent element. Both the <legend> tag can be used in conjunction with <fieldset>, <details> and <figure> tag.

HTML<legend>Tag

This HTML legend tag supports both the global and the event attributes.

Syntax: <legend>Text</legend>



Browser compatibility

The HTML<legend>tag is supported by different types of browsers.

  • Chrome
  • Firefox
  • Opera
  • Safari
  • Internet Explorer

Example:

<!DOCTYPE html>
<html>
<body>
<form>
 <fieldset>
  <legend>Bio-data:</legend>
  Name: <input type="text"><br>
  Email: <input type="text"><br>
Phone number: <input type="text">
 </fieldset>
</form>
</body>
</html>

Output

HTML legend tag

Example 2: The legend tag is used to perform many CSS properties.

<!DOCTYPE html> 
<html> 
  <head> 
     <title>Legend Tag</title> 
    <style> 
  form{ 
     width: 50%; 
    } 
  legend { 
    display: block; 
    padding-left: 10px; 
    padding-right: 10px; 
    border: 3px solid green; 
    background-color:tomato; 
    color:white;; 
        } 
  label { 
     display: inline-block; 
     float: left; 
     clear: left; 
     width: 90px; 
     margin:5px; 
     text-align: left; 
   } 
    input[type="text"] { 
    width:250px; 
    margin:5px 0px; 
        } 
  .gfg { 
     font-size:40px; 
     color:green; 
     font-weight:bold; 
  } 
     </style> 
    </head> 
  <body> 
     <div class = "fn">Freshersnow</div> 
     <h2>Legend tag</h2> 
  <form> 
     <fieldset> 
       <legend>Employee</legend> 
      <label>Name:</label> <input type="text"><br> 
      <label>Email:</label> <input type="text"><br> 
      <label>Date of birth:</label> <input type="text"><br> 
      <label>Address:</label> <input type="text"><br> 
      <label>Emp id:</label> <input type="text"> 
    </fieldset> 
  </form> 
      </body> 
</html>					 

Output:

html legend tag

Attributes that are supported by the <legend> tag

Attribute Value Description
align top
bottom
left
right
Specifies the alignment of the caption