HTML <legend> Tag
Last Updated :
30 Jan, 2024
The legend tag is used to define the title for the child’s contents. The legend elements are the parent element. This tag is used to define the caption for the <fieldset> element.
The <legend> tag also supports the Global Attributes and Event Attributes in HTML.
Syntax:
<legend> Text </legend>
Attributes :Â
|
align
|
It sets the alignment of the legend element.
|
Example 1:Â In this example, we will see the implementation of the legend tag with an example.
html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>GeeksforGeeks</h1>
<strong>HTML Legend Tag</strong>
<form>
<fieldset>
<legend>STUDENT::</legend>
<label>Name:</label>
<input type="text">
<br><br>
<label>Email:</label>
<input type="text">
<br><br>
<label>Date of birth:</label>
<input type="text">
<br><br>
<label>Address:</label>
<input type="text">
<br><br>
<label>Enroll No:</label>
<input type="text">
</fieldset>
</form>
</body>
</html>
|
Output:Â
Example 2: In this example, we will see the implementation of the legend tag by styling the legend tag using CSS properties.Â
html
<!DOCTYPE html>
<html>
<head>
<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="gfg">GeeksforGeeks</div>
<h2>HTML Legend Tag</h2>
<form>
<fieldset>
<legend>STUDENT:</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>Enroll No:</label>
<input type="text">
</fieldset>
</form>
</body>
</html>
|
Output:Â
Supported Browsers:Â
- Google Chrome 1
- Edge 12
- Firefox 1
- Opera 12.1
- Safari 3
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...