HTML <legend> Tag
The legend tag is used to define the title for the child contents. The legend elements are the parent element. This tag is used to define the caption for the <fieldset> element.
Syntax
<legend> Text </legend>
Attribute :
- align: It sets the alignment of the legend element.
Example 1:
html
<!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: 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 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 and above
- Edge 12 and above
- Internet Explorer 6 and above
- Firefox 1 and above
- Opera 12.1 and above
- Safari 3 and above
Please Login to comment...