Skip to content
Related Articles
Open in App
Not now

Related Articles

What is the use of <legend> tag in HTML ?

Improve Article
Save Article
  • Last Updated : 13 Jan, 2022
Improve Article
Save Article

In this article, we will discuss <legend> tag in HTML. 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.

Syntax:

<legend> Some Text...... </legend>

Example 1: In this example, we are going to create a student “Name” and “No” in the student legend tag.

HTML




<!DOCTYPE html>
<html>
  
<body>
    <h1>GeeksforGeeks</h1>
    <strong>HTML Legend Tag</strong>
    <form>
        <fieldset>
            <!-- Legend tag  -->
            <legend>STUDENT::</legend>
            <label>Name:</label>
            <input type="text">
            <br><br>
  
            <label>No:</label>
            <input type="text">
        </fieldset>
    </form>
</body>
  
</html>


Output:

Example 2: The following example demonstrates, how to add CSS styles to the legend tag.

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 -->
            <legend>STUDENT:</legend>
            <label>Name:</label>
            <input type="text">
            <br>
  
            <label> No:</label>
            <input type="text">
        </fieldset>
    </form>
</body>
  
</html>


Output:


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!