إعلان
تعلم الآن

HTML الوسم <legend>

تعريفه

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

<form>
	<fieldset>
		<legend>title</legend>
		...
	</fieldset>
</form>
	

مكان الكلمة title نمرر العنوان الذي سيتم عرضه على الحدود.

دعم المتصفحات

لا يملك أي خصائص تم إعدادها خصيصاً له.

إستخدامه

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

مثال

<form>
    <fieldset>
		<legend>Login Form</legend><br>
        <!-- هنا نضيف العناصر التي ستظهر تحت العنوان و بداخل الحدود -->
	</fieldset>
</form>
		

جرب الكود

تصميمه الإفتراضي

بشكل عام جميع المتصفحات تعرضه بالتنسيق التالي.

legend {
	display: block;
	padding-left: 2px;
	padding-right: 2px;
	border: none;
}
	

نصائح و ملاحظات

يمكنك تحسين تصميم الوسم <legend> بواسطة كود CSS ليظهر بالشكل الذي تريده.

مثال

fieldset {
    background-color: #f1f1f1;
    border-radius: 5px;
}

legend {
	background-color: #555;
	color: #fff;
	padding: 7px 10px;
    border-radius: 5px;
}
		

جرب الكود

إعلان
دورة قواعد بيانات MySQL في هذه الدورة ستتعلم أساسيات قواعد البيانات و أوامر SQL، العلاقات (Join) بين الجداول، Normalization مع تطبيق مشروع متكامل. سعر الدورة الآن هو 20 ريال سعودي فقط بدلاً من 600 ريال
سعر الدورة الآن هو 20 ريال سعودي فقط بدلاً من 600 ريال
تعلم الآن

الدورات

أدوات مساعدة

أقسام الموقع

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