HTML <legend> Tag
In this article, we will cover HTML Tag legend with examples. With the aim that it would serve the learning requirements.
The HTML <legend> tag is used in conjunction with the <fieldset> tag to provide a caption or title for a group of related form controls.
In a form, group elements that are related:
Example:
<!DOCTYPE html>
<html>
<body>
<form action="/action-page.php">
<fieldset><legend>Educational Background:</legend>
<label for="years">Years of Education</label>
<input type="text" id="years" name="years"><br><br>
<label for="mschool">Middle School</label>
<input type="text" id="lname" mschool="mschool"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="heducation">Higher Education</label>
<input type="heducation" id="heducation" name="heducation"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
</body>
</html>
By using CSS, float the fieldset caption to the right:
Example:
<!DOCTYPE html>
<html>
<body>
<form action="/action-page.php">
<fieldset><legend style="float:right">Educational Background:</legend>
<label for="years">Years of Education</label>
<input type="text" id="years" name="years"><br><br>
<label for="mschool">Middle School</label>
<input type="text" id="lname" mschool="mschool"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="heducation">Higher Education</label>
<input type="heducation" id="heducation" name="heducation"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
</body>
</html>
The <fieldset> and <legend> can be styled through CSS:
Example:
<!DOCTYPE html>
<html>
<head>
<style>
fieldset {
background-color: grey;
}
legend {
background-color: blue;
color: yellow;
padding: 4px 8px;
}
input {
margin: 4px;
}
</style>
</head>
<body>
<form action="/action-page.php">
<fieldset><legend>Educational Background:</legend>
<label for="years">Years of Education</label>
<input type="text" id="years" name="years"><br><br>
<label for="mschool">Middle School</label>
<input type="text" id="lname" mschool="mschool"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="heducation">Higher Education</label>
<input type="heducation" id="heducation" name="heducation"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
</body>
</html>
Here is another example of the <legend> tag:
Example:
<!DOCTYPE html>
<html>
<head>
<title>Mr Example</title>
</head>
<body>
<form>
<fieldset>
<legend>Contact Information</legend>
<label for="address">Address:</label>
<input type="text" id="address" name="address" required>
<br>
<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone" required>
</fieldset>
<br>
<fieldset>
<legend>Preferences</legend>
<label for="newsletter">Subscribe to our newsletter:</label>
<input type="checkbox" id="newsletter" name="newsletter">
<br>
<label for="hobbies">Select your hobbies:</label>
<br>
<label>
<input type="checkbox" id="hobby1" name="hobbies" value="reading">
Reading
</label>
<br>
<label>
<input type="checkbox" id="hobby2" name="hobbies" value="traveling">
Traveling
</label>
<br>
<label>
<input type="checkbox" id="hobby3" name="hobbies" value="sports">
Sports
</label>
</fieldset>
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Table Of Content-
Tag legend Usage
In the Tag legend <legend>, the <fieldset> element’s caption is specified.
The HTML <legend> tag is typically used in conjunction with the <fieldset> tag to provide a caption or title for a group of related form controls. Here are some common uses of the <legend> tag:
- When you have a long form with many related fields, using the <fieldset> and <legend> tags can help to organize the form and make it easier for users to understand what information they need to enter.
- The <legend> tag is important for web accessibility, as it provides a textual description of the related form controls for users who are using screen readers or other assistive technologies.
- The <legend> tag can be styled with CSS to enhance its appearance and match the overall design of the web page.
- The <legend> tag can provide context for the related form controls, explaining why the user needs to enter certain information or providing instructions for how to fill out the form.
Browser Support
| Element |  |  |  |  |  |
|---|---|---|---|---|---|
| <legend> | Yes | Yes | Yes | Yes | Yes |
Attributes
Global
Tag legend can also specify Global Attributes in HTML.
Event
Tag legend can also specify Event Attributes in HTML.
CSS Default Settings
The following values are set as defaults in almost all browsers for the <legend> element:
legend {
display: block;
padding-left: 2px;
padding-right: 2px;
border: none;
}Tag legend Advantages
Using the <legend> tag in HTML has several advantages:
- The <legend> tag is an important element for web accessibility, as it provides a textual description of the related form controls for users who are using screen readers or other assistive technologies.
- The <legend> tag helps to organize related form controls, making it easier for users to understand what information they need to enter.
- The <legend> tag can provide context for the related form controls, explaining why the user needs to enter certain information or providing instructions for how to fill out the foThe <legend> tag can be styled with CSS to enhance its appearance and match the overall design of the web page.
- Using the <fieldset> and <legend> tags to group related form controls can make it easier to maintain the code and make changes in the future, as you can update the fieldset and legend rather than having to update each individual form control.
Do subscribe to our Newsletter below in order to be in touch with the latest technical information on this site.
We value your feedback.
+1
+1
+1
+1
+1
+1
+1
