HTML legend Tag

HTML <legend> tag is used to insert a title or caption to its parent element such as <fieldset>. The <legend> element must be the first child of <fieldset > element.

By employing the <legend> tag alongside <form> elements, one can easily comprehend the function of grouped form elements.

Syntax

The provided syntax is utilized in the HTML document to display a caption.

Example


<fieldset>

<legend> Content........<legend>  

<!-- other content -->

</fieldset>

Specifications:

Here are some details regarding the HTML <legend> element:

Display	block
Start tag/End tag	Both Start and End tag
Usage	textual

Examples

The examples below demonstrate the legend element with its default configuration and various CSS attributes, providing users with interactive functionality.

Example 1: The HTML legend tag with the default configuration

Example


<!DOCTYPE html>

<html>

<head>

<title>Legend Tag</title>

</head>

<body>

 <h1>Example of Legend Tag</h1>	

 <form>

              <fieldset>

		<legend>Employee basic information:</legend>

		<label>First Name</label><br>

		<input type="text" name="fname"><br>

		<label>Last Name</label><br>

		<input type="text" name="lname"><br>

		<label>Enter Email</label><br>

		<input type="email" name="email"><br><br>

		<input type="Submit"><br>

                </fieldset>

</form>

</body>

</html>

Output:

Example 2: html legend tag with CSS

The illustration demonstrates the HTML legend tag along with the background, margin, padding, border, and additional CSS attributes and their corresponding values.

Example


<!DOCTYPE html>

<html>

<head>

<title> HTML Legend Tag </title>

<style>

legend {

display: block;

padding-left: 24px;

padding-right: 24px;

padding-top: 5px;

padding-bottom: 5px;

border: 4px solid black;

background-color: orange;

color: navy;

}

</style>

</head>

<body>

<h3> Basic Example of Html Legend Tag  </h3>

<h4> Html Legend Tag with CSS </h4>

<form>

<fieldset>

<legend> Student Information: </legend>

<label> Username First Name </label> <br>

<input type = "text" name = "fname"> <br>

<label> Username Last Name </label> <br>

<input type = "text" name = "lname"> <br>

<label> Username Email </label> <br>

<input type = "email" name = "email"> <br><br>

<input type = "Submit" value = "Save"> <br>

</fieldset>

</form>

</body>

</html>

Output:

The result displays the legend tag with the specified style.

Example 3: html legend tag with right align

The sample demonstrates the legend element with proper alignment and different CSS attributes. The appealing legend tag is displayed on the right-hand side of the block.

Example


<!DOCTYPE html>

<html>

<head>

<title> HTML Legend Tag </title>

<style>

legend {

display: block;

padding-left: 24px;

padding-right: 24px;

padding-top: 5px;

padding-bottom: 5px;

border: 4px solid black;

background-color: orange;

color: navy;

align: bottom;



}

</style>

</head>

<body>

<h3> Example of Html Legend Tag  </h3>

<h4> Html Legend Tag with right align </h4>

<form>

<fieldset>

<legend align="right"> Student Information: </legend>

<label> Username First Name </label> <br>

<input type = "text" name = "fname"> <br>

<label> Username Last Name </label> <br>

<input type = "text" name = "lname"> <br>

<label> Username Email </label> <br>

<input type = "email" name = "email"> <br><br>

<input type = "Submit" value = "Save"> <br>

</fieldset>

</form>

</body>

</html>

Output:

The result displays the legend element formatted as needed.

Example 4: multiple html legend tags with align

The instance demonstrates two legend elements aligned at the top and right with a variety of CSS attributes. The visually appealing legend element showcases essential details within a form element.

Example


<!DOCTYPE html>

<html>

<head>

<title> HTML Legend Tag </title>

<style>

#legend {

display: block;

padding-left: 24px;

padding-right: 24px;

padding-top: 5px;

padding-bottom: 5px;

border: 4px solid black;

background-color: orange;

color: navy;

}

</style>

</head>

<body>

<h3> Example of Html Legend Tag  </h3>

<h4> Html Legend Tag with right and top align </h4>

<form>

<fieldset>

<legend align = "top" id = "legend"> Student Information: </legend>

<label> Username First Name </label> <br>

<input type = "text" name = "fname"> <br>

<label> Username Last Name </label> <br>

<input type = "text" name = "lname"> <br>

<label> Username Email </label> <br>

<input type = "email" name = "email"> <br><br>

<input type = "Submit" value = "Save"> <br>

</fieldset>

<br>

<fieldset>

<legend align = "right"> Write Student Information: </legend>

we can provide the student information for the user interactive data!

</fieldset>

</form>

</body>

</html>

Output:

The result displays the legend tag with the specified style.

Example 5: Utilizing multiple HTML legend tags within the hierarchy operation.

The provided illustration depicts two legend elements with different CSS attributes. One visually appealing legend tag represents the main form element, while the other legend tag displays the contents within the initial tag.

Example


<!DOCTYPE html>

<html>

<head>

<title> HTML Legend Tag </title>

<style>

#legend1 {

display: block;

padding-left: 24px;

padding-right: 24px;

padding-top: 5px;

padding-bottom: 5px;

border: 4px solid black;

background-color: orange;

color: navy;

align: bottom;

}

#legend2 {

display: block;

padding-left: 20px;

padding-right: 20px;

padding-top: 4px;

padding-bottom: 4px;

border: 2px solid black;

background-color: yellow;

color: navy;

align: bottom;

}

</style>

</head>

<body>

<h3> Example of Html Legend Tag  </h3>

<h4> Various Html Legend Tag </h4>

<form>

<fieldset>

<legend align="right" id = "legend1"> Student Information: </legend>

<label> Username First Name </label> <br>

<input type = "text" name = "fname"> <br>

<label> Username Email </label> <br>

<input type = "email" name = "email"> <br>

<input type = "Submit" value = "Save"> <br><br>

<form>

<fieldset>

<legend id = "legend2"> Do you have a Id Card? </legend>

<input type = "radio" id = "yess">

<label for = "yess"> Yes </label>

<input type = "radio" id = "not">

<label for = "not"> No </label>

</fieldset>

</form>

</fieldset>

</form>

</body>

</html>

Output:

The result displays the legend tag with the specified style.

Attribute:

The attributes assist in determining the placement of the tag within global and event functions.

Tag-specific attributes:

The attributes specific to tags aid in positioning the legend tags on the designated side of the fieldset.

Attribute	Value	Description
align	topbottomleftright	It specifies the alignment of the caption.(Not Supported in HTML5)The bottom alignment does not support the web browsers.

✅ bottom
✅ left
✅ right

Global attribute:

The <legend > element enables the utilization of global attributes within HTML.

Event attribute:

The <legend> tag facilitates the utilization of event attributes within HTML.

Supporting Browsers

The HTML legend tag is supported by the browsers listed below, with alignment being consistent except for the bottom position.

Element	Chrome	IE	Firefox	Opera	Safari
`<legend>`	Yes	Yes	Yes	Yes	Yes

Syntax

Specifications:

Examples

Attribute:

Tag-specific attributes:

Global attribute:

Event attribute:

Supporting Browsers

Input Required