برچسب <legend> HTML

تعریف و استفاده

<legend> برچسب تعریف می‌کند <fieldset> عناصر عنوان (caption).

لطفاً به:

دستورالعمل HTML DOM:موضوع (Legend) ابر

مثال

مثال 1

در فرم‌ها، عناصر مرتبط را گروه‌بندی کنید:

<form action="/action_page.php">
  <fieldset>
    <legend>اطلاعات شخصی：</legend>
    <label for="fname">نام：</label>
    <input type="text" id="fname" name="fname"><br><br>
    <label for="lname">نام خانوادگی：</label>
    <input type="text" id="lname" name="lname"><br><br>
    <label for="email">ایمیل：</label>
    <input type="email" id="email" name="email"><br><br>
    <label for="birthday">تاریخ تولد：</label>
    <input type="date" id="birthday" name="birthday"><br><br>
    <input type="submit" value="submit">
  </fieldset>
</form>

آزمایش کنید

مثال 2

عنوان مجموعه‌ها را به سمت راست حرکت دهید (از طریق CSS استفاده کنید):

<form action="/action_page.php">
  <fieldset>
    <legend style="float:right">اطلاعات شخصی：</legend>
    <label for="fname">نام：</label>
    <input type="text" id="fname" name="fname"><br><br>
    <label for="lname">نام خانوادگی：</label>
    <input type="text" id="lname" name="lname"><br><br>
    <label for="email">ایمیل：</label>
    <input type="email" id="email" name="email"><br><br>
    <label for="birthday">تاریخ تولد：</label>
    <input type="date" id="birthday" name="birthday"><br><br>
    <input type="submit" value="submit">
  </fieldset>
</form>

آزمایش کنید

مثال 3

از طریق CSS تنظیم می‌شود <fieldset> و <legend> استایل:

<html>
<head>
<style>
fieldset {
  رنگ پس‌زمینه: #eeeeee;
}
legend {
  رنگ پس‌زمینه: آبی تیره;
  رنگ: سفید;
  ترازش: 5px 10px;
}
input {
  مجرد: 5px;
}
</style>
</head>
<body>
<form action="/action_page.php">
  <fieldset>
    <legend>اطلاعات شخصی：</legend>
    <label for="fname">نام：</label>
    <input type="text" id="fname" name="fname"><br><br>
    <label for="lname">نام خانوادگی：</label>
    <input type="text" id="lname" name="lname"><br><br>
    <label for="email">ایمیل：</label>
    <input type="email" id="email" name="email"><br><br>
    <label for="birthday">تاریخ تولد：</label>
    <input type="date" id="birthday" name="birthday"><br><br>
    <input type="submit" value="submit">
  </fieldset>
</form>
</body>
</html>

آزمایش کنید

ویژگی‌های جهانی

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

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

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

تنظیمات پیش‌فرض CSS

بیشتر مرورگرها از مقادیر پیش‌فرض زیر برای نمایش استفاده می‌کنند <legend> عنصر:

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

آزمایش کنید

پشتیبانی از مرورگر

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
پشتیبانی پشتیبانی پشتیبانی پشتیبانی پشتیبانی