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:-
