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>
		

جرب الكود

الدورات

أدوات مساعدة

أقسام الموقع

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