Programming Basics SQL HTML CSS JavaScript React Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals Linux Learn Typing

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);
}