تگ legend در HTML

204

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

منتشر شده در 29 می 2021

و آخرین بروزرسانی در 12 جولای 2021

دسته بندی ها:

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>