Skip to content
Related Articles

Related Articles

Improve Article

HTML <legend> Tag

  • Difficulty Level : Basic
  • Last Updated : 15 Feb, 2021
Geek Week

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>

Example 1: 

html




<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <h1>GeeksforGeeks</h1>
        <strong>HTML Legend Tag</strong>
        <form>
            <fieldset>
                <!-- Legend tag useing -->
                <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
  • Internet Explorer
  • Firefox
  • Opera
  • Safari

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :