العنصر <fieldset>

من موسوعة حسوب
مراجعة 09:28، 18 سبتمبر 2017 بواسطة عبد اللطيف ايمش (نقاش | مساهمات)
(فرق) → مراجعة أقدم | المراجعة الحالية (فرق) | مراجعة أحدث ← (فرق)

يستعمل العنصر <fieldset> لتجميع عدِّة عناصر ولافتات (<label>) ضمن نموذج في مستند HTML؛ مما يجعل نماذجك أسهل استخدامًا وأوضح.

مثال عن استخدام العنصر <fieldset> وفيه العنصر <legend> كأوّل ابن له، والعنصرين <input> و <label>:

<form action="test.php" method="post">
  <fieldset>
    <legend>Title</legend>
    <input type="radio" id="radio">
    <label for="radio">Click me</label>
    <input type="submit">
  </fieldset>
</form>
تصنيفات المحتوى عنصر تنظيمي وعنصر تقسيمي وعنصر مرتبط بالنماذج.
المحتوى المسموح عنصر <legend> اختياري يتبعه محتوى عادي.
الوسم المختصر لا يمكن حذف أيّ من وسمَي البداية أو النهاية.
العناصر الأب أي عنصر يقبل المحتوى التنظيمي.
واجهة DOM HTMLFieldSetElement

دعم المتصفحات

Chrome Firefox Edge Safari Opera
مدعوم مدعوم مدعوم مدعوم مدعوم

الخاصية form ليست مدعومة في أيّ متصفح رئيسي في وقت كتابة هذه الصفحة.

الخاصيات

يمكن استخدام الخاصيات العامة في هذا العنصر.

disabled

إذا ضُبِطَت هذه الخاصية المنطقية (Boolean) فستُعطَّل جميع عناصر النموذج الأبناء لهذا العنصر ما عدا أبناء العنصر <legend> الاختياري.

العناصر المعطلة هي العناصر غير القابلة للتعديل والتي لن تستقبل أحداث مثل ضغطات الفأرة أو التركيز، وتعرضها المتصفحات عادةً بلونٍ فضي.

مثال

مثال عن استخدام الخاصية disabled لتعطيل جميع الحقول الموجودة ضمن العنصر <fieldset>:

<form action="test.php" method="post">
  <fieldset disabled>
    <legend>Title</legend>
    <input type="radio" id="radio">
    <label for="radio">Click me</label>
    <input type="submit">
  </fieldset>
</form>

form

هذه الخاصية هي قيمة الخاصية id للعنصر <form> الذي يتعلق هذا العنصر به، القيمة الافتراضية هي قيمة الخاصية id لأقرب عنصر <form> أب لهذا العنصر.

مثال

مثال عن استخدام الخاصية form لتحديد ما هو النموذج الذي يتبع له العنصر <fieldset>:

<form action="test.php" method="post" id="form1">
</form>
<fieldset form="form1">
  <legend>Title</legend>
  <input type="radio" id="radio">
  <label for="radio">Click me</label>
  <input type="submit">
</fieldset>

name

الاسم المرتبط بهذه المجموعة.

مثال

<fieldset name="myset">
  <legend>Title</legend>
  <input type="radio" id="radio">
  <label for="radio">Click me</label>
  <input type="submit">
</fieldset>

مصادر ومواصفات