HTMLالوسم <fieldset>
- تعريفه
- دعم المتصفحات
- خصائصه
- إستخدامه
- تصميمه الإفتراضي
تعريفه
نستخدم الوسم <fieldset>
على النحو التالي لتجميع الحقول المشتركة في النموذج و نقصد بذلك رسم حدود حول العناصر لإظهارها بشكل أفضل.
<form> <fieldset> fields </fieldset> </form>
مكان الكلمة fields
نمرر جميع الحقول المشتركة و التي سيتم عرض مربع حولها.
المميز في الحدود التي تعرضها بواسطة الوسم <fieldset>
أنه يمكن وضع عنوان لها يظهر بشكل جميل جداً.
العنوان الذي نضعه للوسم <form>
بواسطة الوسم <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); }