Legend Tag in HTML
In this article, we will see about what is the use of legend tag in HTML. We use the <fieldset> tag to group a set of fields and the <legend> tag to give it a title.
Example :
<!DOCTYPE html>
<html>
<head>
<style>
form{
width: 50%;
}
label {
display: inline-block;
float: left;
clear: left;
width: 90px;
margin:5px;
text-align: left;
}
input[type="text"] {
width:250px;
margin:5px 0px;
}
</style>
</head>
<body>
<h2>HTML Legend Tag</h2>
<form>
<fieldset>
<!-- Legend tag using -->
<legend>LOG IN FORM</legend>
<label>Name:</label>
<input type="text">
<br>
<label>Email:</label>
<input type="text">
<br>
<label>Password:</label>
<input type="text">
</fieldset>
</form>
</body>
</html>Output:
Steps:
- In the above code, we have created the sample form using HTML <form> tag and inside it, we have the <fieldset> tag.
- Then we created some details like name, email, password, etc using <label> and <input> tags.
- In CSS, we have styled the label and input tag
- If we create the title or caption of the field set, we need to use HTML <legend> tag as in the above example code.
- See the above output, our Filedset caption/title is displayed successfully.
If we used the legend tag, it will make the professional look to your forms. This is introduced in HTML 5. This tag is used to add headlines or separate parts of our HTML form. Instead of Creating headings using <h1> tag, we can create that using <legend> tag easily. Because it gives very unique to our fieldset.
