تگ fieldset در HTML

154

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

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

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

دسته بندی ها:

HTML, فرانت اند

با استفاده از تگ fieldset در HTML میتوان عناصر موجود در عنصر <form> را گروه بندی نمود.

مثال

<form action="#" method="POST">
<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>

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

تگ fieldset در HTML برای گروه بندی عناصر موجود در تگ <form> کاربرد دارد ، این عنصر یک کادر ، دور عناصر ایجاد میکند.

نکته: از تگ <legend> برای ایجاد عنوان یا توضیحات در رابطه با گروه بندی ای که توسط عنصر <fieldset> انجام شده استفاده می شود.

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

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

خواص

خاصیت	مقدار	توضیح
disabled	disabled	مشخص میکند که تمام عناصر موجود در گروه باید غیر فعال باشد
form	form_id	مشخص میکند که گروه `<fieldset>` مربوط به کدام `<form>` می باشد
name	text	یک نام برای `fieldset` مشخص میکند

خواص عمومی

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

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

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

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

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

fieldset {
  display: block;
  margin-left: 2px;
  margin-right: 2px;
  padding-top: 0.35em;
  padding-bottom: 0.625em;
  padding-left: 0.75em;
  padding-right: 0.75em;
  border: 2px groove (internal value);
}

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

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

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