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

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

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

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

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

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

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


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

المثال الأول

<form>
<fieldset>
<legend>Login Form</legend>
<!-- هنا نضيف العناصر التي ستظهر بداخل الحدود -->
</fieldset>
</form>
<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> <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> <legend>Questionnaire</legend> <!-- هنا وضعنا حدود و عنوان لكل العناصر التي ستظهر بداخل النموذج --> <fieldset> <legend>Name</legend> <!-- هنا وضعنا حدود و عنوان للمجموعة الأولى بداخل النموذج --> </fieldset> <fieldset> <legend>Favourite Language</legend> <!-- هنا وضعنا حدود و عنوان للمجموعة الأولى بداخل النموذج --> </fieldset> </fieldset> </form>

جرب الكود

الدورات

أدوات مساعدة

أقسام الموقع

دورات
مقالات كتب مشاريع أسئلة