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;
}
		

جرب الكود