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
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:
Attributes that are supported by the <legend> tag
| Attribute | Value | Description |
|---|---|---|
| align | top bottom left right |
Specifies the alignment of the caption |