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>