الكورس

Advertisements

HTML label Tag


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


 

HTML label Tag

 

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

 

مثال للتوضيح

ستجد فى هذا المثال حقلين إدخال ولكل حقل <label> خاص به:

Login

<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>
<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>
<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>
Login


 

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

 

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

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

 

مثال للتوضيح

إستخدم الوسم <input> مباشرة داخل الوسم <label> بدون سمات (for و id):

Login

<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>
Login


 

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

 

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

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

 

عند النقر فوق <label> أو النقر فوقه ويكون مقترنًا بعنصر تحكم نموذج ، يتم أيضًا رفع حدث النقر الناتج لعنصر التحكم المرتبط.

يمكن ربط إدخال input واحد بعدة تسميات labels.


 

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

 

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

السمةالقيمةالوصف
forelement_idيحدد معرف id عنصر النموذج الذي يجب أن ترتبط به التسمية label.
formform_idيحدد الشكل الذي تنتمي إليه التسمية.

 

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

 

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

 


 

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

 

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

 


 

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

 

firefox - الباشمبرمجCHROME - الباشمبرمجIE - الباشمبرمجsafari - الباشمبرمجopera - الباشمبرمج
مدعوممدعوممدعوممدعوممدعوم


الإبلاغ عن خطأ

×

إذا وجد خطأ وتريد الإبلاغ عن هذا الخطأ، أو إذا كنت تريد تقديم اقتراح على شىء معين، فلا تتردد في إرسال بريد إلكتروني إلينا:

info@albashmoparmeg.com

شكرًا لك على مساعدتك لنا!

Advertisements