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>