تگ <legend></legend> در html - وب سایت PNLdev

نمونه کد

یک نمونه ساده از تگ <legend>:

<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>

آزمایشگاه

تعریف و کاربرد

تگ <legend> برای انتخاب عنوان در تگ داخل تگ <fieldset> استفاده می شود.

برای اطلاعات بیشتر به صفحه تگ <fieldset> مراجعه کنید.

سازگاری با مرورگر

#	کروم	ادج	فایرفاکس	سافاری	اپرا
<legend>

ویژگی های سراسری

تگ <legend> از ویژگی های سراسری HTML پشتیبانی می کند.

ویژگی های رویداد

تگ <legend> از ویژگی های رویداد HTML پشتیبانی می کند.

نمونه کد های بیشتر

نمونه کد

مثال شماره 1 با استایل اختصاصی تگ <hr> در HTML

<!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>

آزمایشگاه

استایل css پیش فرض

بیشتر مرورگر ها تگ <legend> را با استایل پیشفرض زیر نمایش می دهند:

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

تگ <legend> در HTML <legend></legend> tag HTML

نمونه کد

تعریف و کاربرد

سازگاری با مرورگر

ویژگی های سراسری

ویژگی های رویداد

نمونه کد های بیشتر

نمونه کد

استایل css پیش فرض

تگ <legend> در HTML
<legend></legend> tag HTML