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 :
Attribute Values |
Description |
---|---|
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.
<!DOCTYPE html> < html >
< head >
</ head >
< body >
< h1 >GeeksforGeeks</ h1 >
< strong >HTML Legend Tag</ strong >
< form >
< fieldset >
<!-- Legend tag using -->
< 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.
<!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 tag using -->
< 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