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>
		

جرب الكود