HTML الوسم <label>

تعريفه

نستخدم الوسم <label> على النحو التالي <label for="element-id">text</label> لوضع إسم خاص لعنصر موضوع في النموذج.

• مكان الكلمة text نضع النص الذي سيظهر عليه.
• مكان الكلمة element-id نضع id العنصر الذي تم وضع الإسم من أجله.

معلومة تقنية

عند إضافة النص بداخل <label> و ربطه بالعنصر الموضوع من أجله يصبح تعامل المتصفح مع هذا العنصر أفضل حيث أنه في حال نقر المستخدم على النص الموضوع للعنصر فإنه سيتم إعتبار أنه نقر على العنصر نفسه و بالتالي يمكنه مباشرةً البدء بالكتابة فيه.

على الحاسوب قد لا تجد لهذا الأمر أي أهمية لأنك تستخدم الماوس للنقر على ما تريد و لكن على الهواتف المحمولة التي تعمل باللمس سيكون من الصعب جداً على المستخدم النقر بإصبعه بداخل مربع النص حتى يبدأ بالكتابة فيه و على الأغلب سيضطر للمحاولة عدة مرات حتى ينقر بداخله.

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

الجدول التالي يظهر المتصفحات التي تدعم الوسم <label>.

خصائصه

يملك خاصية واحدة هي الخاصية 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>
		

جرب الكود

بالرغم من أن هذه الطريقة فعالة إلا أنه يفضل اتباع الطرق السابقة لأنها تتيح لك التحكم بمكان و تصميم كل من العنوان و العنصر بشكل أفضل.