<legend></legend> tag HTML

Example

A simple <legend> tag:

<form action="/action_page.php">
    <legend>Fill out the following form to register:</legend>
    <label for="fname">First name:</label>
    <input type="text" id="fname" name="fname"><br><br>
</form>

Laboratory

description & Usage

The <legend> tag is used to provide a caption for the content inside the <fieldset> tag.

For more information, please refer to the <fieldset> tag page.

Browser compatibility and Support

#	Chrome	Edge	Firefox	Safari	Opera
<legend>

Global Attributes

The <legend> tag supports the HTML Global Attributes.

Event Attributes

The <legend> tag supports the HTML Event Attributes.

More Examples

Example

<legend> HTML tag with custom style -Example #1

<!DOCTYPE html>
<html>
    <head>
        <style>
            body {
                font-family: Arial, sans-serif;
                background-color: #f4f4f4;
            }
            fieldset {
                border: 2px solid #4682B4; 
                border-radius: 10px;
                padding: 20px;
                width: 300px;
                margin: 20px auto;
                background-color: #F0F8FF; 
            }
            legend {
                color: #4682B4; 
                font-size: 24px;
                padding: 10px;
                border: 2px solid #4682B4; 
                border-radius: 5px;
                margin-bottom: 10px;
                background-color: #F0F8FF; 
            }
            input[type="text"] {
                padding: 10px;
                border: 2px solid #4682B4;
                border-radius: 5px;
                margin-bottom: 10px;
                width: 100%;
                box-sizing: border-box;
            }
            input[type="submit"] {
                padding: 10px 20px;
                background-color: #4682B4;
                color: white;
                border: none;
                border-radius: 5px;
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <form>
            <fieldset>
                <legend>Personal Information</legend>
                <label for="name">Name:</label>
                <input type="text" id="name" name="name">
                <label for="email">Email:</label>
                <input type="text" id="email" name="email">
                <label for="email">Password:</label>
                <input type="text" id="Password" name="Password">
                <label for="email">Mobile:</label>
                <input type="text" id="Mobile" name="Mobile">
                <input type="submit" value="Submit">
            </fieldset>
        </form>
    </body>
</html>

Laboratory

Default CSS

Most browsers will display the <legend> tag with the following default style:

legend {
    display: block;
    padding-left: 2px;
    padding-right: 2px;
    border: none;
}