HTMLالوسم <label>
- تعريفه
- دعم المتصفحات
- خصائصه
- إستخدامه
- تصميمه الإفتراضي
- نصائح و ملاحظات
تعريفه
نستخدم الوسم <label>
على النحو التالي <label for="element-id">text</label>
لوضع إسم خاص لعنصر موضوع في النموذج.
- مكان الكلمة
text
نضع النص الذي سيظهر عليه. - مكان الكلمة
element-id
نضعid
العنصر الذي تم وضع الإسم من أجله.
عند إضافة النص بداخل <label>
و ربطه بالعنصر الموضوع من أجله يصبح تعامل المتصفح مع هذا العنصر أفضل حيث أنه في حال نقر المستخدم على النص الموضوع للعنصر فإنه سيتم إعتبار أنه نقر على العنصر نفسه و بالتالي يمكنه مباشرةً البدء بالكتابة فيه.
على الحاسوب قد لا تجد لهذا الأمر أي أهمية لأنك تستخدم الماوس للنقر على ما تريد و لكن على الهواتف المحمولة التي تعمل باللمس سيكون من الصعب جداً على المستخدم النقر بإصبعه بداخل مربع النص حتى يبدأ بالكتابة فيه و على الأغلب سيضطر للمحاولة عدة مرات حتى ينقر بداخله.
دعم المتصفحات
الجدول التالي يظهر المتصفحات التي تدعم الوسم <label>
.
Chrome | Edge | Firefox | Opera | Safari | Android Webview |
Chrome for Android |
Firefox for Android |
Opera for Android |
Safari for IOS |
Samsung Internet |
مدعوم | 12 | مدعوم | مدعوم | مدعوم | مدعوم | مدعوم | مدعوم | مدعوم | مدعوم | مدعوم |
خصائصه
يملك خاصية واحدة هي الخاصية for
التي نضيفها له لإعلام المتصفح من هو العنصر الذي تم وضع العنوان لأجله.
إستخدامه
في المثال التالي قمنا بوضع الإسم الخاص بكل عنصر في النموذج بداخل <label>
.
المثال الأول
<!-- الوسم التالي الموضوع بعده لربطه به id أعطيناه <label> هنا قمنا بوضع --> <label for="username">Username</label> <input type="text" id="username" name="username"> <!-- الوسم التالي الموضوع بعده لربطه به id أعطيناه <label> هنا قمنا بوضع --> <label for="password">Password</label> <input type="password" id="password" name="password">
في المثال التالي قمنا بوضع الإسم الخاص بكل عنصر في النموذج أيضاً بداخل <label>
.
المثال الثاني
<!-- الوسم التالي الموضوع قبله لربطه به id أعطيناه <label> هنا قمنا بوضع --> <input type="radio" id="ar" name="language" value="arabic" checked> <label for="ar">Arabic</label> <!-- الوسم التالي الموضوع قبله لربطه به id أعطيناه <label> هنا قمنا بوضع --> <input type="radio" id="en" name="language" value="english"> <label for="en">English</label> <!-- الوسم التالي الموضوع قبله لربطه به id أعطيناه <label> هنا قمنا بوضع --> <input type="radio" id="fr" name="language" value="french"> <label for="fr">French</label>
تصميمه الإفتراضي
بشكل عام جميع المتصفحات تعرضه بالتنسيق التالي.
label { cursor: default; }
نصائح و ملاحظات
أي عنصر تريد وضع إسم له يمكنك وضع الإسم و العنصر نفسه بشكل مباشر بداخل الوسم <label>
و عندها لن تضطر إلى إضافة الخاصية for
للعنصر كما فعلنا في المثال التالي.
مثال
<label> Username <input type="text" name="username"> </label> <label> Password <input type="password" name="password"> </label>
بالرغم من أن هذه الطريقة فعالة إلا أنه يفضل اتباع الطرق السابقة لأنها تتيح لك التحكم بمكان و تصميم كل من العنوان و العنصر بشكل أفضل.