Open In App

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

Improve
Improve
Like Article
Like
Save
Share
Report

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:



Last Updated : 13 Jan, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads