HTML <fieldset> کا تگ

تعریف و استفاده

<fieldset> برچسب برای گروه‌بندی عناصر مرتبط در فرم استفاده می‌شود.

<fieldset> برچسب در اطراف عناصر مرتبط یک جعبه را می‌کشد.

<legend> برچسب fieldset برای تعریف عنوان استفاده می‌شود.

دوسری مراجع را ببینید:

HTML DOM مرجع کتاب:آبجکت Fieldset

مثال

مثال 1

برای گروه‌بندی عناصر مرتبط در فرم، استفاده می‌شود:

<form action="/action_page.php">
  <fieldset>
    <legend>Personal Information:</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>

آزمایش کنید

مثال 2

استایل‌های <fieldset> و <legend> با استفاده از CSS تنظیم می‌شوند:

<html>
<head>
<style>
fieldset {
  background-color: #eeeeee;
}
legend {
  background-color: gray;
  color: white;
  padding: 5px 10px;
}
input {
  margin: 5px;
}
</style>
</head>
<body>
<form action="/action_page.php">
  <fieldset>
    <legend>Personal Information:</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>
</body>
</html>

آزمایش کنید

توجه و نظرات

توجه:برچسب <legend> برای تعریف عنوان عنصر <fieldset> استفاده می‌شود

ویژگی

ویژگی مقدار توضیح
disabled disabled مشخص می‌کند که یک مجموعه از عناصر فرم باید غیرفعال شوند
form form_id مشخص می‌کند که میدان‌ها به کدام فرم تعلق دارند
name متن نام میدان‌ها را مشخص می‌کند

ویژگی‌های جهانی

<fieldset> برچسب‌ها نیز از ویژگی‌های رویداد پشتیبانی می‌کنند ویژگی‌های جهانی در HTML。

ویژگی‌های رویداد

<fieldset> برچسب‌ها نیز از ویژگی‌های رویداد پشتیبانی می‌کنند ویدئو می‌دهد که چگونه از ویژگی‌های رویداد در HTML استفاده می‌شود。

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

بیشتر مرورگران اس کی جانب سے درج ذیل پیش فرض کی قیمتیں استعمال کریں گے <fieldset> عنصر:

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 (داخلی قیمتی);
}

بھرپائی کنندگان

کروم ایج فائرفاکس سافری آپریا
کروم ایج فائرفاکس سافری آپریا
پشتیبندگی پشتیبندگی پشتیبندگی پشتیبندگی پشتیبندگی