العنصر <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;
}

مصادر ومواصفات