<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);
}
جميع الحقوق محفوظة لموقع هرمش. لا يسمح باستخدام الشروحات لأغراض تجارية، إجراء تعديل عليها، نشرها في موقع آخر، وضع الشروحات في تطبيق أو في كتاب إلا في حال أخذ موافقة صريحة من إدارة الموقع كما أن المحتوى مسجل بواسطة DMCA و في حال قيامك بمخالفة حقوق النشر سنضطر آسفين لاتخاذ الإجراءات اللازمة.
