HTMLعنونة عناصر النموذج
- أهمية عنونة العناصر
- الطريقة الصحيحة لعنونة العناصر
أهمية عنونة العناصر
إضافة نص عادي كإسم لعنصر موضوع في النموذج لا يعتبر أفضل طريقة لفعل ذلك لأن المتصفح لن يعرف أنهما مرتبطين ببعضهما.
في هذا الدرس سنتعلم الطريقة الصحيحة لعنونة عناصر النموذج باستخدام الوسم <label>.
طريقة وضع أسماء لعناصر النموذج كما فعلنا سابقاً لا تُعتبر أفضل طريقة لفعل ذلك و ليست الطريقة التي يجب إتباعها لفعل ذلك. في هذا الدرس ستتعلم الطريقة الصحيحة لعنونة العناصر.
في المثال التالي الطريقة التي قمنا فيها بوضع عنوان لمربع النص ليست الطريقة التي يجب إتباعها رغم أنها تظهر بشكل عادي جداً في المتصفح.
المشكلة في هذه الطريقة هي أن المتصفح لا يعرف أن النص Username مرتبط بمربع النص الموضوع بعده و بالتالي في حال قام المستخدم بالنقر على النص فإنه لن يعرف أنه يريد البدء بالكتابة بداخل مربع النص الخاص به و بالتالي سيضطر المستخدم أن يقوم بالنقر بداخل مربع النص حتى يتمكن من الكتابة فيه.
الطريقة الصحيحة لعنونة العناصر
أي عنصر في النموذج تريد وضع نص خاص له سواء بجانبه أو فوقه يفترض أن تضعه بداخل <label> </label>.
عند إضافة النص بداخل <label> و ربطه بالعنصر الموضوع من أجله يصبح تعامل المتصفح مع هذا العنصر أفضل حيث أنه في حال نقر المستخدم على النص الموضوع للعنصر فإنه سيتم إعتبار أنه نقر على العنصر نفسه و بالتالي يمكنه مباشرةً البدء بالكتابة فيه.
على الحاسوب قد لا تدرك أهمية هذا الأمر لأنك تستخدم الماوس للنقر على ما تريد و لكن على الهواتف المحمولة التي تعمل باللمس سيكون من الصعب جداً على المستخدم النقر بإصبعه بداخل مربع النص حتى يبدأ بالكتابة فيه و قد يضطر أحياناً أن يحاول عدة مرات حتى ينجح بالنقر بداخله. من ناحية أخرى فإن هذا الأمر مفيد جداً حين تتعلم كيفية تعديل تصميم الصفحات بواسطة كود CSS لأن ذلك سيمكنك من إضافة مؤثرات جميلة جداً على العناصر الموضوعة في النموذج حين يتفاعل المستخدم معها.
الآن، لربط أي عنصر موضوع في النموذج بإسم خاص به يجب:
- إضافة الخاصية
idللعنصر و إعطاؤها إسم خاص للعنصر. - إضافة الخاصية
forفي الوسم<label>و تمرير نفس قيمة الخاصيةidالتي وضعناها للعنصر لها.
في المثال التالي قمنا بإضافة مربع نص <input type="text"> مربوط بإسم <label> في النموذج.
