Input Tag and lable
في الدرس السابق تعرفنا على أنواع العناصر input tag فكان منها المساحة التي تحتوي نصوص أو رموز مشفرة ومنها ما يحتوي أرقام أو تواريخ كذلك خيارات من متعدد وجميع هذه العناصر هي جزء من form له بداية ونهاية ولكن ماذا عن النصوص التي تجاور هذه العناصر والتي تدل المستخدم على الهوية المناسبة للعنصر وما هي الية تعبئتها
label tag :
هو الوسم الذي يحتوي الكلام الدال على ماهية البيانات التي يجب على المستخدم تعبئتها في العنصر لاحظ الشكل:
هنا استخدمنا النصوص الإعتيادية داخل لغة HTML وقد دلت المستخدم على المحتوى المناسب لهذا العنصر لكن ماذا عن إستخدام label tag ما الفرق الذي سوف يحدثة إستخدام هذا الوسم :
تتبع إشارة الرقم 1 باللون البرتقالي :ستلاحظ هنا أن كلمة: User Name جائت بين بداية ونهاية الوسم label هو يحوي خاصية for وهذه الخاصية للربط بين label وtag أخر.
تتبع إشارة الرقم 2 باللون الأخضر:
ستلاحظ أن وسم input قد أخذ خاصية id التي تم ذكرها في الدرس السابق وهي خاصية لتميز الوسم وتمكين المصمم من إستدعائة متى يشاء وقد أختار له المصمم هذا الإسم الإقتراضي - يمكن لأي مصمم تغيرة كيفما يشاء- وقد كانت قيمة الخاصية id هنا هي username وقد تم استدعائها داخل خاصية for في label tag تتبع السهم الأخضر.
في النتيجة تتبع إشارة الرقم 3 باللون الاصفر:
عند وضع مؤشر الفأره على كلمة :User Name تلقائيأ سوف ينتقل المؤشر الى العنصر وسنلاحظ ظهور مؤشر الكتابة كما هو واضح عند الإشارة رقم 4 باللون الأزرق وكذلك سيكون العنصر بالكامل مُعلم بمحيط غامق.
هذا الفرق بين أستخدام مجرد كلام عادي غير مؤثر على النتيجة وبين إستخدام tag متخصص بالإشارة الى العنصر المراد تعبئة البيانات داخلة.
لنجرب معا أن نصمم صفحة للدخول الى حساب معين مثل الدخول الى البريد الإلكتروني:
لاحظ أن العنصر الأول معلم بمحيط غامق اي أن المستخدم قد وضع مؤشر الفأره على كلمة :User Name
Radio Button:
وهو زر الإختيار من متعدد لو أردنا من المستخدم ان يختارجنسه إما ذكر أو أنثى لاحظ الشكل:
لاحظ هنا ان كلمة Male ذكر ظهرت بناءاً على وجود هذه الكلمة بين بداية ونهاية label tag كما هو موضح عند الأشارة الزرقاء بالرقم 1بينما الدائرة التي بجوار كلمة Male جائت من وسم input الذي خاصية type له قيمتها radio وإستخدمنا خاصية id حتى يمكننا ذلك من إستدعائة عند وسم label ،وكذلك الإختيار الثاني Female باللون البرتقالي. لكن هل يمكننا من تحديد خيار تلقائي من هذان الخياران ؟ نعم وذلك بإستخدام كلمة checked عند الخيار الذي نريد أن نجعل منه الخيار التلقائي تتبع التغير في الشيفرة السابقة:
الأن أريد أن أصمم صفحة تحتوي على سؤالين أحدهم عن الجنس ذكر أو أثنى والأخر عن الفئة العمرية :
في هذه الحال سيتمكن المستخدم من إختيار جميع الخيرات ولكي نحدد له خيار واحد فقط لكل سؤال علينا أن نقسم الخيارات الي مجموعات فالسؤال الأول ستكون لخياراته مجموعة واحدة ولن يتمكن المستخدم من إختيار إلا خياراً واحداً منهم وكذلك السؤال الثاني ستكون جميع خياراته في مجموعة واحده فلا يسمح للمستخدم إلا إختيار خيار واحد منهم، لكن السؤال كيف نصمم مجموعة لوسم input من نوع radio
الجواب هو عن طريق خاصية name فكل مجموعة نقوم بتوحيد قيمة خاصية name لها وبتالي لا يُسمح للمستخدم إلا أختيار خيار واحد من الخيارات التي تحتوي نفس قيمة الخاصية name لاحظ الفرق في الشيفرة:
Checkbox button:
وهذا التصميم يأتي ليمكن المستخدم من إختيار عدة خيارات من نفس المجموعة وهو يشبة عملية الشراء عند اختيار الخيارات التي يود المستخدم من إختيارها تتبع الشيفرة :
في مثل هذه الخيارات ليس من الضروري أن تضع مجموعات للحد من إختيارات المستخدم لكن يمكنك إستخدام خاصية checked لتحديد الخيارات المُختاره بشكل تلقائي
texteara tag:
هو وسم لتصميم عنصر لإعطاء المستخدم مساحة للكتابة داخله وإعطاء الملاحظات أو ارسال رسالة قصيرة وهو وسم له بداية ونهاية ويمكن التحكم بحجمه من خلال خاصيتين هما cols و rows أي عدد الأسطر والصفوف كلما زادت القيمة زاد حجم حيز الكتابة تتبع الشيفرة التالية :
وهكذا ننهي أهم قواعد التصميم بإستخدام لغة HTML اتمنى أن الشرح قد كان وافياً لكم ترقبونا في الدورة الجديدة JavaScript بإذن الله ...ويمكنكم من طرح الموضوعات التي تحبون أن نقوم بإنشاء دورات لها كذلك... الى لقاء جديد.
