تگ fieldset در HTML

  /  فرانت اند   /  HTML   /  تگ fieldset در 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>بلهبلهبلهبلهبله

خواص

خاصیتمقدارتوضیح
disableddisabledمشخص میکند که تمام عناصر موجود در گروه باید غیر فعال باشد
formform_idمشخص میکند که گروه <fieldset> مربوط به کدام <form> می باشد
nametextیک نام برای 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>

برای دسترسی به آموزش های بیشتر و ویدیو های من ، کلمه کلیدی متین برونسی را داخل گوگل سرچ کنید.

ارسال یک نظر