HTML label Tag
HTML label Tag – يحدد الوسم <label> تسمية توضيحية لعنصر في واجهة المستخدم.
HTML label Tag
يحدد الوسم <label> تسمية لعدة عناصر وهم:
مثال للتوضيح
ستجد فى هذا المثال حقلين إدخال ولكل حقل <label> خاص به:
<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> بطريقتين:
- ربط الوسم <label> بالـ <input> عن طريق إضافة سمة id للـ <input>، ثم إضافة السمة for للـ <label>. ولكن يجب أن تكون قيمة كلاً من السمتين (for و id) متماثلين. كما فى المثال التوضيحى السابق.
- إستخدم الوسم <input> مباشرة داخل الوسم <label>. في هذه الحالة ، لا يلزم وجود سمات for و id لأن الارتباط ضمني. كما فى المثال التوضيحى التالى.
مثال للتوضيح
إستخدم الوسم <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> ، فإنه يقوم بتبديل عنصر التحكم.
عند النقر فوق <label> أو النقر فوقه ويكون مقترنًا بعنصر تحكم نموذج ، يتم أيضًا رفع حدث النقر الناتج لعنصر التحكم المرتبط.
يمكن ربط إدخال input واحد بعدة تسميات labels.
السمات المحددة – Specific Attributes
يدعم الوسم <label> هذه السمات:
السمة | القيمة | الوصف |
---|---|---|
for | element_id | يحدد معرف id عنصر النموذج الذي يجب أن ترتبط به التسمية label. |
form | form_id | يحدد الشكل الذي تنتمي إليه التسمية. |
السمات العامة – Global Attributes
الوسم <label> يدعم السمات العامة أيضًا، تعرف عليهم عن طريق هذا الرابط: السمات العامة – Global Attributes.
سمات الحدث – Event Attributes
يدعم الوسم <label> سمات الحدث أيضًا، تعرف عليهم عن طريق هذا الرابط: سمات الحدث – Event Attributes.
دعم المتصفحات
![]() | ![]() | ![]() | ![]() | ![]() |
مدعوم | مدعوم | مدعوم | مدعوم | مدعوم |
الإبلاغ عن خطأ
×إذا وجد خطأ وتريد الإبلاغ عن هذا الخطأ، أو إذا كنت تريد تقديم اقتراح على شىء معين، فلا تتردد في إرسال بريد إلكتروني إلينا:
info@albashmoparmeg.com
شكرًا لك على مساعدتك لنا!