HTML label Tag

HTML label Tag – يحدد الوسم <label> تسمية توضيحية لعنصر في واجهة المستخدم.

HTML label Tag

يحدد الوسم <label> تسمية لعدة عناصر وهم: 

• <button>
• <input> (مع جميع أنواع الإدخالات).
• <meter>
• <output>
• <progress>
• <select>
• <textarea>

<form action="/actions/test.php">
<fieldset>
        <legend>Login</legend>
        <p>
          <label for="username">Username:</label>
          <input type="text" name="username" id="username">
        </p>
        <p>
          <label for="pass">Password:</label>
          <input type="password" name="pass" id="pass">
        </p>
        <input type="submit" value="Login">
    </fieldset>
</form>

طرق إستخدام الوسم <label>

يمكن استخدام الوسم <label> بطريقتين:

1. ربط الوسم <label> بالـ <input> عن طريق إضافة سمة id للـ <input>، ثم إضافة السمة for للـ <label>. ولكن يجب أن تكون قيمة كلاً من السمتين (for و id) متماثلين. كما فى المثال التوضيحى السابق.
2. إستخدم الوسم <input> مباشرة داخل الوسم <label>. في هذه الحالة ، لا يلزم وجود سمات for و id لأن الارتباط ضمني. كما فى المثال التوضيحى التالى.

<form action="/actions/test.php">
    <fieldset>
      <legend>Login</legend>
      <p>
          <label>
              Username:
              <input type="text" name="username">
          </label>
      </p>
      <p>
          <label>
              Password:
              <input type="password" name="pass">
          </label>
      </p>
      <input type="submit" value="Login">
    </fieldset>
  </form>

فوائد إستخدام الوسم <label>

يوفر ربط <label> بعنصر <input> بعض المزايا الرئيسية التى ستفيد:

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

السمات المحددة – Specific Attributes

يدعم الوسم <label> هذه السمات:

السمات العامة – Global Attributes

الوسم <label> يدعم السمات العامة أيضًا، تعرف عليهم عن طريق هذا الرابط: السمات العامة – Global Attributes.

سمات الحدث – Event Attributes

يدعم الوسم <label> سمات الحدث أيضًا، تعرف عليهم عن طريق هذا الرابط: سمات الحدث – Event Attributes.

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

مدعوم	مدعوم	مدعوم	مدعوم	مدعوم