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