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

HTMLتجميع عناصر النموذج المشتركة

  • مفهوم تجميع العناصر
  • إضافة حدود حول العناصر

مفهوم تجميع العناصر

تجميع العناصر يقصد به رسم حدود حول العناصر المشتركة و إعطاءها عنوان مما يجعل النموذج يظهر بشكل أفضل.

يمكنك رسم حدود حول كل عناصر النموذج و يمكنك رسم حدود حول العناصر الموضوعة بداخله أيضاً.

في هذا الدرس سنتعلم كيفية وضع حدود حول العناصر المشتركة في النموذج لإعطاء النموذج بشكل أجمل.

إضافة حدود حول العناصر

يستخدم الوسم <fieldset> لإضافة حدود على شكل مربع حول عناصر النموذج مع إمكانية إضافة عنوان مميز له.
عنوان النموذج يتم إضافته بواسطة الوسم <legend> حتى يظهر بشكل جميل جداً ضمن خطوط المربع.


في المثال التالي قمنا بإضافة حدود و عنوان للنموذج نفسه.

المثال الأول

<form>
    <fieldset>
        <legend>Login Form</legend>
        <!-- هنا نضيف العناصر التي ستظهر بداخل الحدود -->
    </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>
جرب الكود