ما وظيفة العنصر label
<label> يعطي حقل النموذج اسمه. اربطه بـ for مضبوطة على id الحقل، فيحدث أمران: تعلن قارئات الشاشة التسمية حين يكون التركيز على الحقل، والنقر على نص التسمية ينقل التركيز إلى الحقل. انقر النصين أدناه:
النقر على «City» يضع المؤشر في حقله. أما النقر على «Country» فلا يفعل شيئًا، وقارئ الشاشة عند التركيز على الحقل الثاني لا يقول إلا «نص قابل للتحرير» بلا اسم. يبدوان متطابقين، لكن أحدهما فقط له تسمية.
طريقتان لربط التسمية
استخدم for وid، أو ضع الحقل داخل التسمية:
for وid | الإحاطة | |
|---|---|---|
يحتاج إلى id | نعم، فريد في الصفحة | لا |
| يمكن فصل التسمية عن الحقل | نعم (خلية جدول، شبكة) | لا، الحقل بالداخل |
| سهل الكسر | بخطأ إملائي أو id مكرر | بوضع حقلين في تسمية واحدة |
يجب أن تطابق for قيمة id الحقل، لا name. غالبًا ما تكونان الكلمة نفسها، وهذا يخفي الخطأ حتى يغيّر أحدهم واحدة منهما. وفعل الأمرين معًا (الإحاطة وfor) مقبول وشائع.
يمكن ربط التسمية بـ <input> (عدا type="hidden") و<select> و<textarea> و<button> و<meter> و<output> و<progress>. التسمية الواحدة تسمّي حقلًا واحدًا. ويمكن أن يكون للحقل أكثر من تسمية، لكن تسمية واحدة واضحة أسهل على الجميع.
هدف نقر أكبر لمربعات الاختيار وأزرار الاختيار
في العناصر الصغيرة تكون التسمية أهم ما يكون: النقر في أي مكان عليها يبدّل المربع، فيصبح الهدف سطر النص كله لا مربعًا بعرض 13 بكسل. وتنسيق التسمية يمكن أن يجعل الهدف أكبر أيضًا:
انقر في حشو كل صف، بعيدًا عن المربع. الصف الأول يتبدل، والثاني لا يفعل شيئًا ما لم تصب المربع نفسه. المزيد عن مربعات الاختيار في مربع الاختيار checkbox.
التلميحات ورسائل الخطأ
يجب أن تكون التسمية قصيرة: اسم الحقل. التعليمات الإضافية ورسائل الخطأ توضع في عناصر منفصلة مربوطة بـ aria-describedby، فتقرأ قارئات الشاشة التسمية أولًا ثم الوصف بعدها:
اضغط Create والحقل فارغ، ثم مع AB، ثم مع ada99. مع aria-describedby يعلن قارئ الشاشة شيئًا مثل «Username، مطلوب، نص قابل للتحرير، 3 to 16 lowercase letters or digits، Enter a username.» علامة النجمة aria-hidden لأن السمة required تقول «مطلوب» أصلًا، وسماع «نجمة» لا يضيف شيئًا.
التسميات المخفية
لبعض الحقول إشارة ظاهرة غير التسمية النصية، مثل صندوق بحث بجانب زر Search. التسمية ما زالت ضرورية: أخفها بصريًا وأبقها في الصفحة لقارئات الشاشة:
لا تخفها بـ display: none أو visibility: hidden: فهاتان تخفيانها عن قارئات الشاشة أيضًا، وليست كل المتصفحات وقارئات الشاشة ما زالت تستخدم التسمية المخفية كاسم. الخيار الآخر هو aria-label="Search courses" على الحقل، الذي يسمّيه من دون أي عنصر تسمية. ومع ذلك تبقى التسمية الظاهرة أفضل خيار كلما وُجدت مساحة: فالجميع يستفيد من رؤية الغرض من الحقل.
أخطاء شائعة
forتشير إلىnameبدلًا منid. لا يحدث أي ربط.- معرّفات مكررة.
forترتبط بأول عنصر يحمل ذلك المعرّف، وقد يكون حقلًا في نموذج آخر في الصفحة. - placeholder بدلًا من التسمية. يختفي عند الكتابة وليس اسمًا موثوقًا.
- حقلان داخل تسمية واحدة. التسمية تسمّي حقلًا واحدًا، ويبقى الثاني بلا تسمية.
- رابط داخل تسمية مربع اختيار، مثل «I accept the terms» حيث «terms» رابط. جزء من السطر يبدّل المربع وجزء يفتح صفحة، ومن السهل إصابة الخطأ. ضع الرابط خارج التسمية.
- إخفاء التسمية بـ
display: none. استخدم فئة للإخفاء البصري. - نص بجانب الحقل ليس
<label>. يبدو مثله ولا يفعل شيئًا. للنموذج المحيط بحقولك، راجع النماذج في HTML.
الأسئلة الشائعة
ما وظيفة وسم label في HTML؟
يسمّي حقل النموذج. تقرأ قارئات الشاشة التسمية حين يكون التركيز على الحقل، والنقر على التسمية ينقل التركيز إلى الحقل، أو يبدّله إن كان مربع اختيار أو زر اختيار.
ما هي السمة for في label؟
for تحمل id الحقل الذي تنتمي إليه التسمية: <label for="email">Email</label> <input id="email">. يجب أن تطابق id تمامًا، لا name.
هل أضع input داخل label أم أستخدم for؟
كلاهما يعمل في المتصفحات وقارئات الشاشة الحالية. الإحاطة لا تحتاج إلى معرّفات، أما for وid فتتيحان للتسمية والحقل أن يكونا في مكانين مختلفين في الشيفرة، مثل خليتي جدول منفصلتين. فرق كثيرة تحيط الحقل وتضيف for أيضًا.
هل يمكن أن يحل placeholder محل label؟
لا. يختفي placeholder بمجرد أن يكتب القارئ، وغالبًا ما يكون ضعيف التباين، ولا يُعلن عنه بشكل موثوق كاسم للحقل. استخدم <label> ظاهرًا واحتفظ بـ placeholder لقيمة مثال إن احتجت إليه أصلًا.
كيف أخفي label مع إبقائه لقارئات الشاشة؟
أبقِ <label> وأخفه بصريًا بفئة تقلّصه إلى بكسل واحد وتقصّه، لا بـ display: none التي تخفيه عن قارئات الشاشة أيضًا. وللحقل الذي لا مكان فيه لأي تسمية، البديل هو aria-label على الحقل.
