مجموعه فیلدها (fieldset)
تگ «مجموعه فیلدها (fieldset)» برای گروه بندی ورودی های مرتبط است. یعنی چند فیلد هم موضوع را در یک باکس منظم می گذاری. این کار فرم را خواناتر می کند و مدیریت را ساده تر می کند.
fieldset چه کاری انجام می دهد؟
تگ fieldset دور عناصر مرتبط یک قاب می کشد. معمولاً با legend عنوان می گیرند. سپس کاربر متوجه دسته بندی می شود؛ مثل برگه های فرم مدرسه.
نمونه: گروه بندی ورودی های فرم
<form action="/action_page.php">
<fieldset>
<legend>Personalia:</legend>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">
<br>
<br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname">
<br>
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<br>
<br>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">
<br>
<br>
<input type="submit" value="Submit">
</fieldset>
</form>
نکته ها و دسترسی
legend: برای عنوان قاب استفاده می شود. disabled: همه فیلدهای داخل را غیرفعال می کند. form: تعیین می کند این fieldset متعلق به کدام فرم است. name: یک نام منطقی برای گروه می دهد.
نمونه: استایل دهی fieldset و legend
<style>
fieldset {
background-color: #eeeeee;
}
legend {
background-color: gray;
color: white;
padding: 5px 10px;
}
input {
margin: 5px;
}
</style>
<form action="/action_page.php">
<fieldset>
<legend>Personalia:</legend>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">
</fieldset>
</form>
تنظیمات پیش فرض CSS
مرورگرها به صورت پیش فرض fieldset را بلوکی و دارای حاشیه موسوم به groove نمایش می دهند.
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);
}
مراحل سریع استفاده
- موضوع مشترک فیلدها را مشخص کن.
- یک <fieldset> بساز و داخلش ورودی ها را بگذار.
- برای عنوان، یک <legend> اضافه کن.
- در صورت نیاز ویژگی disabled یا form را تنظیم کن.
جمع بندی سریع
- fieldset گروه بندی فرم را ساده می کند.
- legend عنوان واضح می سازد.
- disabled کل گروه را غیرفعال می کند.
- استایل دهی با CSS بسیار ساده است.