Related Articles

Related Articles

HTML <legend> Tag
  • Difficulty Level : Basic
  • Last Updated : 30 Jul, 2019

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.

Example 1:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <title>Legend Tag</title>
        <style>
            form{
            width: 50%;
            }
            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>Legend tag</h2>
        <form>
            <fieldset>
                <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>                    

chevron_right


Output:
legend tag

Example 2: The legend tag is used to perform many CSS properties.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <title>Legend Tag</title>
        <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>Legend tag</h2>
        <form>
            <fieldset>
                <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>                    

chevron_right


Output:
legend tag

Supported Browser: The browser supported by <legend> tag are listed below:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :