وظيفة واستخدام الوسم (label) في HTML وعلاقته بعناصر الإدخال وأهمية الخاصيتين "for" و "name" وتشابه قيمهما

سأقوم بشرح مفهوم label والعلاقة بينها وبين input و for و name و id.

عادةً، يتم استخدام label في لتوضيح نص محدد لحقل معين في نموذج (form) على صفحة الويب.

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

يتم ربط label بحقل إدخال محدد في النموذج بواسطة معرف (id)، ويتم تحديد الحقل المرتبط باستخدام الخاصية for في label وإدخال معرف الحقل.

يمكن أيضًا تحديد اسم (name) للحقل، ولكن بشكل عام، يكون الـ id والـ name مختلفين عن بعضهما البعض. 

إذا كانت القيم المستخدمة للـ id والـ name متشابهة، فإن ذلك لأنهما يتعلقان بنفس الحقل. ومع ذلك، يمكن استخدام قيم مختلفة للـ id والـ name إذا كانت الحاجة موجودة.

هنا مثال بسيط يوضح العلاقة بين label و input مع استخدام الـ for والـ id:

<label for="username">اسم المستخدم:</label>
<input type="text" id="username" name="username">

في هذا المثال، يتم استخدام label لوصف حقل الإدخال (input) الذي له معرف (id) مسمى "username".

يتم ربط label بالحقل الذي له نفس المعرف باستخدام الخاصية "for" في label. 

سأقوم بتقديم بعض الأمثلة لكل خاصية:

- الـ label: يمكن استخدام label لأي عنصر في HTML ولكن بشكل عام يتم استخدامها مع الحقول النموذجية مثل input و select و textarea. هنا مثال لاستخدام label مع input لتوضيح حقل إدخال للاسم الأول:

<label for="firstname">الاسم الأول:</label>
<input type="text" id="firstname" name="firstname">

- الـ for: يتم استخدام for بشكل خاص مع الـ label لربطها بحقل محدد. يتم استخدام الـ id لتحديد الحقل المرتبط بها. هنا مثال لاستخدام الـ for مع label:

<label for="email">البريد الإلكتروني:</label>
<input type="email" id="email">

- الـ name: يتم استخدام name لتحديد اسم الحقل في النموذج. يمكن استخدامها لتحديد قيمة الحقل المرسلة إلى الخادم. هنا مثال لاستخدام name مع input:

<label for="username">اسم المستخدم:</label>
<input type="text" id="username" name="username">

- الـ id: استخدام الـ id في CSS و JavaScript لتحديد العنصر المراد التحكم به. هذا يسمح للمطورين بتطبيق تنسيقات وتنفيذ الأوامر البرمجية على عنصر HTML محدد.هنا مثال لاستخدام الـ id في CSS لتغيير لون خلفية العنصر div المحدد:

<style>
  #wrapper {
    background-color: blue;
  }
</style>

<div id="wrapper">
  <p>محتوى الصفحة</p>
</div>

في هذا المثال، يتم استخدام الـ id "wrapper" لتحديد العنصر div، وتغيير لون خلفيته إلى اللون الأزرق في CSS. يمكن استخدام الـ id بنفس الطريقة في JavaScript لتنفيذ الأوامر البرمجية على العنصر المحدد.

الوسم (label)

في HTML، الوسم (label) يستخدم لإنشاء تسمية لعنصر إدخال (input) معين على الصفحة، ويعمل الوسم (label) على تحسين تجربة المستخدم ويساعد في جعل النماذج (forms) أكثر وضوحًا واستخدامًا.

واستخدامه الشائع هو  مع عناصر إدخال مثل الخيارات (checkboxes) وأزرار الاختيار (radio buttons) وحقول النص (text fields) وما إلى ذلك.

ويعمل الوسم (label) على توفير وصف مقروء بواضح للعنصر المقابل، مما يجعله أكثر فهمًا للمستخدمين.

لربط الوسم (label) بعنصر الإدخال (input)، تستخدم الخاصية "for" في الوسم (label) وتحديد قيمتها بنفس قيمة خاصية "id" لعنصر الإدخال المطابق.

أي إذا كان لديك عنصر إدخال نصي (text field) مع خاصية "id" تحمل قيمة معينة، فيمكنك ربط الوسم (label) بهذا العنصر عن طريق تحديد قيمة "for" بنفس هذه القيمة ، مما يعني أنه عند النقر فوق الوسم (label)، سيتم تحديد عنصر الإدخال المرتبط به.

مثال:

<label for="username">اسم المستخدم:</label>
<input type="text" id="username" name="username">

قمت بربط الوسم (label) بعنصر الإدخال (input) المطابق باستخدام قيمة "for" التي تكون مطابقة لقيمة خاصية "id" لعنصر الإدخال، وتظهر التسمية "اسم المستخدم:" بجانب عنصر الإدخال، وعند النقر فوقها، يتم تحديد عنصر الإدخال لإدخال اسم المستخدم.

الخاصيتين name و id

بالنسبة للخاصيتين "name" و "id"، فغالبًا ما يكون لهما قيم متشابهة لأنهما يعملان في سياقات مختلفة:

• فالخاصية "id" تستخدم لتعريف هوية فريدة لعنصر HTML، وتستطيع استخدام هذا الهوية في الأنماط (CSS) والسكريبتات (JavaScript) للاستهداف العنصر وتنفيذ الإجراءات المطلوبة عليه.
• أما الخاصية "name" تستخدم بشكل شائع في إرسال البيانات من نموذج HTML إلى الخادم عند تقديم النموذج، حيث يعتبر "name" جزءًا من زوج "اسم/قيمة" (name/value) الذي يتم إرساله إلى الخادم.

مثال:

لنفترض أن لدينا نموذج HTML بسيط يحتوي على حقل إدخال نصي وزر إرسال، ونريد جمع البيانات المدخلة من المستخدم وإرسالها إلى الخادم، وهنا يمكننا استخدام الخاصية "name" والخاصية "id" بالشكل التالي:

<label for="name">الاسم:</label>
<input type="text" id="name" name="name">

<button type="submit" name="submit" id="submit">إرسال</button>

يوجد حقل إدخال نصي يحمل الخاصية "id" والخاصية "name" بقيمة "name"، بمعنى أنه عندما يتم إرسال النموذج، ستتم إرسال القيمة المدخلة في هذا الحقل تحت اسم "name".

بالإضافة إلى ذلك، يوجد زر إرسال يحمل الخاصية "id" والخاصية "name" بقيمة "submit"، وفي حالة النقر على هذا الزر، يمكن استهدافه باستخدام الخاصية "id" في الأنماط (CSS) أو السكريبتات (JavaScript) لتنفيذ إجراءات معينة.

وتستطيع قراءة المزيد في موسوعة حسوب، حيث يوجد شرح لجميع عناصر وخواص HTML و CSS:

• https://wiki.hsoub.com/HTML
• https://wiki.hsoub.com/CSS

وأيضًا يوجد قسم خاص بدروس HTML و CSS في قسم المقالات في أكاديمية حسوب:

• https://academy.hsoub.com/programming/html/
• https://academy.hsoub.com/programming/css/