تگ legend در HTML

نوشته شده توسط: متین برونسی

تاریخ انتشار: 8 خرداد 1400

تاریخ بروزرسانی: 11 خرداد 1400

تعداد بازدید: 137

Frontend HTML

با استفاده از تگ legend در HTML میتوان یک عنوان یا کپشن را برای تگ <fieldset> مشخص کرد.

مثال

در مثال زیر با استفاده از تگ legend در HTML برای عنصر <fieldset> که درون فرم قرار دارد یک عنوان تعریف کرده ایم:

<form action="example.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="ارسال">
</fieldset>
</form>

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

تگ legend در HTML برای عنصر <fieldset> یک عنوان یا کپشن تعریف می کند.

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

عنصر
`<legend>`	بله	بله	بله	بله	بله

خواص عمومی

تگ legend از خواص عمومی در HTML پشتیبانی میکند.

رویداد های عمومی

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

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

اکثر مرورگر ها عنصر legend در HTML را با تنظیمات پیش فرض زیر نمایش می دهند:

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

مثال های بیشتر

در این مثال با استفاده از خواص CSS یک استایل سفارشی برای تگ های <legend> و <fieldset> طراحی کرده ایم:

<!DOCTYPE html>
<html dir="rtl">
<head>
<style>
fieldset {
background-color: #dceceb;
}

legend {
background-color: #2b8675;
color: white;
padding: 5px 10px;
}

input {
margin: 5px;
}
</style>
</head>
<body>

<h1>عنصر fieldset به همراه CSS</h1>

<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="ثبت اطلاعات">
</fieldset>
</form>

</body>
</html>