<label>: عنصر LABEL
آخر تحديث: 2026-10-13
<label>عنصر LABEL
عنصر <label> يعرّف تسمية لعنصر تحكم في النموذج. الخاصية for تربطه بـ id لعنصر التحكم؛ النقر على التسمية يوجّه/ينشط التحكم، محسنًا إمكانية الوصول وتجربة اللمس.
| الفئة | النماذج |
|---|---|
| نموذج المحتوى | محتوى نصي (بدون <label> متداخل) |
| العناصر الأم المسموحة | أي عنصر يقبل المحتوى النصي |
| وسم الإغلاق | نعم — يتطلب إغلاق </label> وسم |
| الحالة | قياسي |
📝 البنية
<label for="username">اسم المستخدم:</label>
<input type="text" id="username">⚙️ السمات
يدعم هذا العنصر السمات العامة بالإضافة إلى ما يلي:
| السمة | القيمة | الوصف |
|---|---|---|
for | Element ID | The ID of the associated form control. |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفح
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <label> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
❓ الأسئلة الشائعة
Qما فائدة سمة for في label؟
Aتشير
for إلى id الحقل مؤسسة ارتباطًا صريحًا: النقر على نص label يركّز/يحدد الحقل، ويقرأ قارئ الشاشة label اسمًا للحقل. الصياغة: <label for='email'>البريد الإلكتروني</label><input id='email'>.Qهل يغني تغليف input داخل label عن كتابة for؟
Aنعم. فتغليف label للعنصر ارتباط ضمني لا يحتاج for ولا id؛ لكن label واحد لا يغلّف إلا عنصرًا واحدًا. والارتباط الضمني غير ودود للتخطيطات المعقدة (إذ يوضع label غالبًا منفصلًا عن العنصر)، فالارتباط الصريح بـ for أكثر مرونة — ولا تخلط الطريقتين على العنصر نفسه.
Qهل يمكن وضع عنوان أو رابط داخل label؟
Aلا ينبغي وضع العناوين (h1-h6) ولا العناصر التفاعلية (روابط وأزرار). دلالة label «اسم العنصر»، وتداخل العناصر التفاعلية يوقع تعارضًا في سلوك النقر وارتباكًا في قراءة قارئ الشاشة. فضع الشروح المساعدة خارج label أو اربطها بـ aria-describedby.
🏷️ وسوم ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
