علامة <label> في HTML

  • الصفحة السابقة <kbd>
  • الصفحة التالية <legend>

تعريف وشرح

<label> تعريف وشرح علامة label لعدد من عناصر input

لا تظهر علامة label أي تأثير خاص على المستخدم. ومع ذلك، فإنها تحسن من قابلية الاستخدام للمستخدمين الذين يستخدمون الفأرة. إذا قمت بالنقر على النص داخل علامة label، فإن هذا سيشغل هذا التحكم. هذا يعني أن عند اختيار العلامة من قبل المستخدم، سيقوم المتصفح تلقائيًا بتحويل التركيز إلى عنصر النموذج المرتبط بالعلامة.

<label> علامة خصائص for يجب أن تكون نفسها كخصائص id للعناصر ذات الصلة.

<label> يمكن للعلامة تعريف علامة (علامة) للعناصر المتعددة:

استخدام العناصر المذكورة مع label بطريقة صحيحة سيكون مفيدًا للعديد من المستخدمين:

  • مستخدمي قارئ الشاشة (عندما يركز المستخدم على العنصر، سيقرأ العنصر)
  • بصعوبة في النقر على مناطق صغيرة جدًا (مثل المربعات المربوطة) - لأنه عندما يضغط المستخدم <label> للمستخدمين الذين يجدون صعوبة في النقر على مناطق صغيرة جدًا (مثل المربعات المربوطة) - لأنه عندما يضغط المستخدم

انظر أيضًا:

دليل مرجعي HTML DOM:مفهوم Label

مثال

ثلاثة أزرار اختيارية تحتوي على label:

<form action="/action_page.php">
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label><br><br>
  <input type="submit" value="إرسال">
</form>

جرب بنفسك

النصائح والتعليقات

نصيحة:<label> يجب أن يكون خاصية for الخاصة بالعنصر مساوية لخاصية id العنصر حتى يتم ربطهما معًا. يمكن أيضًا ربط العنصر بوضعه في <label> العنصر سيربط العلامة إلى العنصر داخل العنصر.

الخصائص

الخصائص القيمة الوصف
for id العنصر يحدد label الربط إلى أي عنصر في النموذج.
form id للنموذج يحدد label الحقل الذي ينتمي إليه النموذج.

خصائص العالمية

<label> العلامة تدعم أيضًا خصائص العالمية في HTML.

خصائص الحدث

<label> العلامة تدعم أيضًا خصائص الحدث في HTML.

إعدادات CSS افتراضية

معظم المتصفحات ستعمل باستخدام القيم التالية كقيم افتراضية <label> العنصر:

label {
  cursor: default;
}

جرب بنفسك

دعم المتصفحات

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
الدعم الدعم الدعم الدعم الدعم
  • الصفحة السابقة <kbd>
  • الصفحة التالية <legend>