HTML الوسم <fieldset>
تعريفه
نستخدم الوسم <fieldset> على النحو التالي لتجميع الحقول المشتركة في النموذج و نقصد بذلك رسم حدود حول العناصر لإظهارها بشكل أفضل.
<form> <fieldset> fields </fieldset> </form>
مكان الكلمة fields نمرر جميع الحقول المشتركة و التي سيتم عرض مربع حولها.
معلومة تقنية
المميز في الحدود التي تعرضها بواسطة الوسم <fieldset> أنه يمكن وضع عنوان لها يظهر بشكل جميل جداً.
العنوان الذي نضعه في الوسم بواسطة الوسم <fieldset> نضعه بواسطة <legend> المخصص له و هذا الشيء يمكن فعله بشكل اختياري.
دعم المتصفحات
الجدول التالي يظهر المتصفحات التي تدعم الوسم <fieldset>.
| Chrome | Edge | Firefox | Opera | Safari | Android Webview |
Chrome for Android |
Firefox for Android |
Opera for Android |
Safari for IOS |
Samsung Internet |
| مدعوم | 12 | مدعوم | مدعوم | مدعوم | مدعوم | مدعوم | مدعوم | مدعوم | مدعوم | مدعوم |
خصائصه
نود الإشارة إلى أننا سنذكر الخصائص المهمة و المستخدمة فعلياً و نتجاهل أي خصائص لا يوصى باستخدامها.
الخاصية disabled
يمكن إضافتها للوسم لجعله غير مفعل مما يعني أنه سيظهر في الصفحة و لكن لن يكون بإمكان المستخدم التعامل مع العناصر الموضوعة بداخله.
الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.
| Chrome | Edge | Firefox | Opera | Safari | Android Webview |
Chrome for Android |
Firefox for Android |
Opera for Android |
Safari for IOS |
Samsung Internet |
| مدعوم | 12 | مدعوم | 12 | 6 | 4.4 | مدعوم | مدعوم | ؟ | 6 | مدعوم |
الخاصية form
يمكن إضافتها للوسم لتحديد إلى أي نموذج هو تابع و هذا الأمر يمكنك فعله في حال كان الوسم موضوع خارج النموذج و تريد ربطه به.
يجب وضع id النموذج الذي يتبع له كقيمة للخاصية.
الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.
| Chrome | Edge | Firefox | Opera | Safari | Android Webview |
Chrome for Android |
Firefox for Android |
Opera for Android |
Safari for IOS |
Samsung Internet |
| مدعوم | 12 | مدعوم | مدعوم | مدعوم | مدعوم | مدعوم | مدعوم | مدعوم | مدعوم | مدعوم |
الخاصية name
يمكن إضافتها للوسم بهدف إعطائه إسم حتى يتم إرساله مع البيانات التي يتم إرسالها في النموذج.
الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.
| Chrome | Edge | Firefox | Opera | Safari | Android Webview |
Chrome for Android |
Firefox for Android |
Opera for Android |
Safari for IOS |
Samsung Internet |
| مدعوم | 12 | مدعوم | مدعوم | مدعوم | مدعوم | مدعوم | مدعوم | مدعوم | مدعوم | مدعوم |
إستخدامه
في المثال التالي قمنا بإضافة حدود و عنوان للنموذج نفسه.
المثال الأول
<form>
<fieldset>
<legend>Login Form</legend><br>
<!-- هنا نضيف العناصر التي ستظهر بداخل الحدود -->
</fieldset>
</form>
في المثال التالي قمنا بإضافة حدود و عناوين للعناصر الموجودة في النموذج بشكل تظهر مقسومة لمجموعتين.
المثال الثاني
<form>
<fieldset>
<fieldset>
<legend>Name</legend>
<!-- هنا وضعنا حدود و عنوان للمجموعة الأولى بداخل النموذج -->
</fieldset>
<fieldset>
<legend>Favourite Language</legend>
<!-- هنا وضعنا حدود و عنوان للمجموعة الأولى بداخل النموذج -->
</fieldset>
</fieldset>
</form>
في المثال التالي قمنا بإضافة حدود و عنوان للنموذج نفسه و حدود عناوين للعناصر الموجودة فيه بشكل تظهر مقسومة لمجموعتين.
المثال الثالث
<form>
<fieldset>
<legend>Questionnaire</legend>
<!-- هنا وضعنا حدود و عنوان لكل العناصر التي ستظهر بداخل النموذج -->
<fieldset>
<legend>Name</legend>
<!-- هنا وضعنا حدود و عنوان للمجموعة الأولى بداخل النموذج -->
</fieldset>
<fieldset>
<legend>Favourite Language</legend>
<!-- هنا وضعنا حدود و عنوان للمجموعة الأولى بداخل النموذج -->
</fieldset>
</fieldset>
</form>
في المثال التالي قمنا بإضافة حدود مع جعل العناصر بداخله غير مفعلة.
المثال الرابع
<form>
<fieldset disabled>
<!-- العناصر التي نضيفها هنا ستظهر غير مفعلة -->
</fieldset>
</form>
تصميمه الإفتراضي
بشكل عام جميع المتصفحات تعرضه بالتنسيق التالي.
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);
}
