سؤال فى النموذج form و العلاقة بين input و lable

وعليكم السلام ورحمة الله وبركاته،

يمكنك استخدام كلا الطرقتين من أجل وضع label لعنصر الـ input من خلال وضعه داخل العنصر أو من خلال استخدام id خاص بعنصر الـ input وربطه باستخدام الوسم for، كما في الطرقتين التاليتين:

في الطريقة الأولى وهي وضع عنصر الـ input داخل الـ label وهنا تستخدم عندما يكون عنصر الإدخال بجانب عنصر الـ label مباشرة ولايفصل شيء بينهم.

<label>  النص المراد
<input type="text">
</label>

في الطريقة الثانية يمكنك ربطه من خلال الوسم for وهذه تستخدم عندما يكون هنالك عناصر تفصل بين العنصرين السابقين، وأنا ارجح استخدام هذه الطريقة أكثر ﻷنها تحل المشكلتين،

<label for="input">
 النص المراد
 </label>

 <input type="text" id="input">

أعتقد انه من الأفضل لك هو استخدام الطريقة الثانية دائمًا.

شكرًا لك.

وضع عنصر input بداخل عنصر label سيسمح لك بتحديد عنصر input (أي يصبح في وضع focus جاهز للكتابة) عند الضغط على عنصر label، هذه الطريقة تسمى implicit labels، وبذلك لن تكون في حاجة لإضافة الخاصيتين for و id في كل من العنصرين label و input على التوالي وهذه الطريقة تسمى explicit labels.

لاحظ أن هذه الطريقة تعمل فقط في المتصفحات الحديثة (المتصفح IE6 وما قبله لا يدعم هذه الميزة).

وهذا إقتباس من موقع w3.org يوضح أن الطريقتين صحيحتين ولكن من الأفضل إستعمال الطريقة الثانية (وهي إضافة الخاصيتين for و id) لأن في بعض الحالات قد قد تحدث مشكلات في طريقة العمل.

اقتباس

The HTML and XHTML specifications allow both implicit and explicit labels. However, some assistive technologies do not correctly handle implicit labels (for example, First name ). For example <label>First name <input type="text" name="firstname"></label>).

إن العنصر lable (دليل) منفصل عن العنصر input (حقل إدخال) أي أنهما لا يوضعان ضمن بعضهما البعض، إنما نكتب عنصر lable و نحدد الخاصية for و نعطيها قيمة id العنصر input المرتبط معه.

مثال:

<form >
  
  <label for="male">Male</label>
  <input type="radio" name="gender" id="male" value="male">
  <br>
  
  <label for="female">Female</label>
  <input type="radio" name="gender" id="female" value="female">
  <br>
  
  <label for="other">Other</label>
  <input type="radio" name="gender" id="other" value="other">
  <br><br>
  <input type="submit" value="Submit">
</form>

والنتيجة ستكون:

قبل إضافة الوسم lable كنا نضع نص عادي للدلالة على محتوى حقل الإدخال، ومع lable أصبح الموضوع أفضل (يوجد جزء محدد لزضع النص و تنسيقه.

- نلاحظ أن كلا من lable + input هي عناصر inline تتوضع جانب بعضها البعض.

يمكنك إعطاؤ تنسيقات CSS لأي عنصر lable مثل أي عنصر آخر.