صمم موقعك الإلكتروني سريعاً Form Tag - الدرس التاسع

Fram Tag

هل سبق لك وأن لاحظت وجود االشكل التالي في المواقع الإلكتروني:

هذا الشكل يسمى Form وهو وسم له بداية وله نهاية لكن يتميز هذا الوسم باِحتوائة مجموعة من العناصر ففي الشكل السابق Form اِحتوى 5 عناصر كما هو واضح في الصورة :

كل من العنصر الأول والثالث باللون الأزرق هما وسم <lable>  وهو وسم له بداية ونهاية وبين البداية والنهاية نضع النص المناسب حتى يدرك المستخدم ماذاعلية أن يضع في الخانة التي تحت وسم <lable>.

أما العناصر الثاني والرابع والخامس فيرجع أصلهم الى وسم يدعى <input> وهو وسم بداية فقط  وله مجموعة من الخصائص أهمها خاصية type وهي التي تميز نوع الخانة سواء أكانت للكتابة الإسم بالحروف العادية أو كلمات السر المخفيه بشكل نجوم أو نقاط أو حتى أزرار مثل زر login في العنصر الخامس وأغراض أخرى كثيرة لنوضح الصورة أكثر دعونا نقوم بتجريب هذة الخاصية داخل الوسم <input> والذي هو بين بداية ونهاية وسم Form.

وسم <input>:

1- خاصية type:

 هي الخاصية التي تميز نوع العنصر فمثلا عندما تكون قيمتها text:

هنا إذا  قام المستخدم بالكتابة داخل العنصر كانت الأحرف والرموز واضحة أما اذا كانت قيمة الخاصية type هي Password فستكون النتيجة مشفرة غير ظاهرة للمستخدم وهو نوع من أنواع الأمان حتى لا يتمكن الأخرون من معرفة كلمة السر كما في الشيفرة التالية:

ماذا سيحدث لو حولنا قيمة الخاصية type الى  radio :

هنا استطعنا أن نصنع أزار للإختيار من متعدد مثل أن يقوم المستخدم بالإختيار بين ذكر أو انثى سنقوم بشرحها بالتفصيل لاحقاً.

الان سنقوم بتحويل الخاصية type الى checkbox :

وكذلك سنقوم بتحويل الخاصية type الى range  ليمكن المستخدم من اختيار قيمة من معيار محدد لاحظ الشكل:

الان سنقوم بتحويل الخاصية type الى color :

عند الضغط على العنصر ستظهر قائمة بالألوان.

وهنا سنقوم بتحويل الخاصية type الى date لتحديد التواريخ :

وايضا للوقت من خلال  تحويل الخاصية type الى  time:

وكذلك لعمليات البحث نستطيع Hن نحول الخاصية type الى search:

وفي هذا الحال سيكون العنصر مبرمج مسبقا على لغة HTML ليقوم بتنفيذ عليات البحث هنالك الكثير من القيم لهذه الخاصية وبعضها مبرمج تلقائياً ليقوم بتنفيذ مهام معينه مثل زر submit 

لنقوم بتحويل قيمة الخاصية type الى  submit :

لاحظ كيف تحول العنصر إلى زر ليضغط علية المستخدم، وهذا الزر يعتبر زر مبرمج مسبقا من قبل لغة HTML ليقوم بتحميل البيانات التي أدخلها المستخدم ورفعها الى خادم الموقع الإلكتروني Server.

وهناك أنواع اخرى للأزرار نستطيع تغيرها حسب قيمة الخاصية type مثل القيمة reset وهي القيمة المبرمجة مسبقاُ لمسح البيانات التي أدخلها المستخدم جرب الضفط عليها في الشيفرة التالية:

 الأن لو قمت بالضغط على الزر سيقوم تلقائياً بمسح البيانات التي أدخلها المستخدم لتعود الحقول فارغة من جديد، إن كل من القيميتين submit وreset  هما مبرمجتين لعمل محدد لكن إذا احتجنا زر لعمل شيىء جديد سنحول القيمة الى button لاحظ معي

هنا سيكون الزر غير مبرمج ليقوم بعملية معينة ولكي نقوم ببرمجته علينا أن نتعلم لغة JavaScript سنقوم أن شاء الله بعمل دورة خاصة لها، كما أن الزرbutton ايضا لا يحتوي نص ليدل على ما سيقوم بة ويمكننا أن نقوم بإضافة النص له سواء أكان الزر submit او reset او button من خلال خاصية جديدة داخل الوسم <input> هي:

2- خاصية Value :

هي خاصية لإعطاء قيم افتراضة للعناصر وكذلك خلق نص على الزر button تتبع الشيفرة التالية:

ويمكنني إستخدام هذه الخاصية لعناصر أخرى لخلق قيمة افتراضية داخل الحقل لاحظ الشيفرة:

لاحظ هنا العنصر الأول قمنا بإستخدام الخاصية value لإعطاءة قيمة افتراضية تظهر للمستخدم فور تحميل الصفحة ويمكنة تغيرها.

أما العنصر الثالث فهو زر من نوع button غير مبرمج ولكن استطعنا ان نظهر نص علية ليفهم المستخدم ماهي طبيعة عمل هذا الزر.

بالطبع ستلاحظ النوع الجديد من القيم للخاصية value وهو number لتحديد الأرقام وكما أسلفنا القيم كثيره.

3-  الخاصية name: 

هي خاصية لتحديد إسم خاص للعنصر نستطيع أن نميزه من خلالها وهي مشابة للخاصية الموجود في وسم body الدرس الثاني.

4- الخاصية id: 

وهي خاصية لإعطاء العنصر قيمة نستطيع أن نستدعية متى أردنا من خلالها والتعامل معه عن طريقها

وسنخوض في تفاصيل ذلك أكثر في الدروس القادمة..

 الى اللقاء وعيد سعيد.