HTMLالوسم <legend>
- تعريفه
- دعم المتصفحات
- إستخدامه
- تصميمه الإفتراضي
- نصائح و ملاحظات
تعريفه
نستخدم الوسم <legend> بداخل الوسم <fieldset> على النحو التالي لوضع عنوان للحقول المشتركة في النموذج و نقصد بذلك وضع عنوان يظهر على الحدود المرسومة حول العناصر.
<form>
<fieldset>
<legend>title</legend>
...
</fieldset>
</form>
<form>
<fieldset>
<legend>title</legend>
...
</fieldset>
</form>
مكان الكلمة title نمرر العنوان الذي سيتم عرضه على الحدود.
دعم المتصفحات
لا يملك أي خصائص تم إعدادها خصيصاً له.
إستخدامه
في المثال التالي قمنا بإضافة حدود و عنوان للنموذج نفسه.
مثال
<form>
<fieldset>
<legend>Login Form</legend><br>
<!-- هنا نضيف العناصر التي ستظهر تحت العنوان و بداخل الحدود -->
</fieldset>
</form>
<form>
<fieldset>
<legend>Login Form</legend><br>
<!-- هنا نضيف العناصر التي ستظهر تحت العنوان و بداخل الحدود -->
</fieldset>
</form>
تصميمه الإفتراضي
بشكل عام جميع المتصفحات تعرضه بالتنسيق التالي.
legend {
display: block;
padding-left: 2px;
padding-right: 2px;
border: none;
}
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;
}
fieldset {
background-color: #f1f1f1;
border-radius: 5px;
}
legend {
background-color: #555;
color: #fff;
padding: 7px 10px;
border-radius: 5px;
}
