HTML тег <legend>

Опубликовано: 1 Марта, 2022

Тег легенды используется для определения заголовка дочернего содержимого. Элементы легенды являются родительским элементом. Этот тег используется для определения заголовка для элемента <fieldset>.

Синтаксис

 <legend> Текст </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>

Выход:

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>

Выход:

Поддерживаемые браузеры:

  • Гугл Хром
  • Internet Explorer
  • Fire Fox
  • Опера
  • Сафари

РЕКОМЕНДУЕМЫЕ СТАТЬИ

1 Марта, 2022
1 Марта, 2022
1 Марта, 2022
1 Марта, 2022
1 Марта, 2022
1 Марта, 2022