❮
Programming Basics SQL HTML CSS JavaScript Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals Learn Typing
❯
عودة للدرس❯ ❮عودة للدرس

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">
<!-- الوسم التالي الموضوع بعده لربطه به 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>
<!-- الوسم التالي الموضوع قبله لربطه به 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 { cursor: default; }

نصائح و ملاحظات

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

مثال

<label>
Username
<input type="text" name="username">
</label>
<label>
Password
<input type="password" name="password">
</label>
<label> Username <input type="text" name="username"> </label> <label> Password <input type="password" name="password"> </label>

جرب الكود


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

عودة للدرس❯ ❮عودة للدرس