HTML <legend> Tag

In this blog, you will learn about the HTML <legend> Tag. The HTML <legend> Tag is used to insert a title or caption in its parent element such as a <fieldset>. The <legend> element must be the first child of the <fieldset> element.

Using the <legend> Tag with <form> elements makes it easier to understand the purpose of grouped form elements.

Using HTML <legend> Tag, we can make the title of the form with design and make the form design unique.

Example1:-

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>HTML legend Tag</title>
</head>
<style>
 
</style>
<body>
  <h1>This is HTML Legend Tag</h1>
<form>  
    <fieldset>  
        <legend>Employee Basic Information:</legend>  
        <label>Enter Name</label><br>  
        <input type="text" name="fname"><br>  
        <label>Enter Email</label><br>  
        <input type="email" name="email"><br> 
        <label>Enter Password</label><br>  
        <input type="password" name="password"><br><br>  
        <input type="Submit"><br> <br> 
    </fieldset>  
</form>  
</body>
</html>

Output:-

Example2:-

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>HTML legend Tag</title>
</head>
 <style type="text/css">
   fieldset{
    background: lightblue;
    width: 350px;
    text-align: center ;
   }
   legend{
    background: blue;
    padding: 10px;
    color: #fff;
    text-transform: uppercase;
   }
   form
fieldset
input{
  padding: 10px;
  width: 60%;
}
 </style>
<body>
  <h1>This is HTML Legend Tag</h1>
<form>  
    <fieldset>  
        <legend>Employee Basic Information </legend>  <br>
      
        <input type="text" placeholder="Enter Name" name="fname"><br> <br> 
         
        <input type="email" placeholder="Enter Email" name="email"><br> <br>
          
        <input type="password" placeholder="Enter Password" name="password"><br><br>  
        <input type="Submit" style="background:#000;color: #fff;text-transform: uppercase;"><br> <br> 
    </fieldset>  
</form>  
</body>
</html>

Output:-


Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *