تعريفه
نستخدم الوسم <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;
}
جرب الكود