العنصر <label>
يُمثِّل العنصر <label>
لافتةً (caption) لأحد عناصر النماذج.
مثال عن عنصر <label>
بسيط يوجد داخله أحد عناصر النموذج:
<label>لافتة نصية <input type="text"></label>
بطاقة العنصر
تصنيفات المحتوى | عنصر تنظيمي وعنصر عادي وعنصر تفاعلي وعنصر مرتبط بالنماذج. |
---|---|
المحتوى المسموح | العناصر التي يمكن إضافة لافتة لها، ولا يسمح باستخدام العنصر <label> داخله.
|
الوسم المختصر | لا يمكن حذف أيّ من وسمَي البداية أو النهاية. |
العناصر الأب | أي عنصر يقبل المحتوى العادي. |
واجهة DOM | HTMLLabelElement
|
دعم المتصفحات
Chrome | Firefox | Edge | Safari | Opera |
---|---|---|---|---|
مدعوم | مدعوم | مدعوم | مدعوم | مدعوم |
الخاصيات
يمكن استخدام الخاصيات العامة في هذا العنصر.
for
قيمة هذه الخاصية هي مُعرِّف ID لعنصر نماذج يمكن إضافة لافتة له موجودٌ في نفس المستند. سترتبط اللافتة بأوّل عنصر في المستند له مُعرِّف ID يُطابِق قيمة هذه الخاصية.
ملاحظة: يُسمَح باستخدام الخاصية for
إضافةً إلى احتواء العنصر <label>
على العنصر الذي ستُضاف إليه اللافتة، طالما كانت الخاصية for
تُشير إلى العنصر المحتوى داخله.
مثال عن عنصر <label>
مع استعمال الخاصية for
للإشارة إلى أحد عناصر النموذج الذي يقع بعده:
<label for="username">لافتة نصية</label>
<input type="text" id="username">
form
هذه الخاصية هي قيمة الخاصية id
للعنصر <form>
الذي يتعلق هذا العنصر به، يمكن تحديد قيمة لهذه الخاصية للإشارة إلى عنصر <form>
في نفس المستند، مما يسمح بوضع اللافتات في أيّ مكان في المستند دون التقيّد أن تكون داخل العنصر <form>
.
يجدر بالذكر أنَّ هذه الخاصية قد حُذِفَت من مواصفة HTML في نيسان/أبريل 2016، لكن ما يزال بالإمكان الوصول إلى هذه الخاصية عبر السكربتات (HTMLLabelElement.form
)، وتُعيد النموذج الذي ترتبط به اللافتة، أو null
إن كانت اللافتة غير مرتبطة بأحد عناصر النماذج أو لم يكن ذلك العنصر جزءًا من أحد النماذج.
ملاحظات الاستخدام
يمكن أن ترتبط الافتة المُعرَّفة عبر العنصر <label>
إما عبر وضع عنصر النموذج ضمن العنصر <label>
أو باستخدام الخاصية for
؛ لاحظ أنَّ من المسموح أن يرتبط عنصر إدخال وحيد بعدة لافتات.
لا ترتبط اللافتات نفسها بالنماذج مباشرةً، وإنما ترتبط معها بشكلٍ غير مباشر عبر عناصر النماذج.
التنسيق الافتراضي
تعرض أغلبية المتصفحات العنصر <label>
مع ضبط شكل المؤشر cursor
إلى default
:
label {
cursor: default;
}
مصادر ومواصفات
- معيار HTML Living Standard.
- مواصفة HTML5.
- مواصفة HTML 4.01.