بسم الله الرحمن الرحيم والسلام والسلام على اشرف المرسلين
مرحبا متابعي مدونة كبسولة البرمجة في درس اليوم سنحاول شرح ال Forms في Html مع امثلة مفصلة
مرحبا بكم في درس اليوم من دروس Html , في درسنا اليوم سنتعرف على الفورم Html Form , اولا لنفهم ال Forms يجب ان نطرح سؤالا جوهريا , في ماذا نحتاج ال Forms ؟ نحتاج الفورمز لارسال بيانات لقواعد البيانات لتعيد ارسالها لاطراف اخرى اذا استدعى الامر كمثال نحتاج الفورمز عند انشاء حساب في موقع معين او عند تسجيل الدخول او عند ارسال رسالة لشخص معين , لنبدء في شرح الفورمز دعنا اولا نتعرف على بنية الفورمز في Html
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title></head><body><form action="" method=""><input type="" name="" id="" required placeholder=""></form></body></html>
الفورم يكتب عن طريق التاغ Tag فورم Form ويحتوي على الكثير من الخاصيات propertys لكن ما يهمنا هما خاصيتان وهما Action و Method الخاصية الاولى Action نضع فيه المسار الذي سنرسل له البيانات التي قمنا بادخالها في الفورم Form مثلا تخيل انه عندنا متجر الكتروني عندما نقوم بادخال معلومات المنتج الذي نريد شراءه يتم ارسال المعلومات الى صفحة Cart اي عربة التسوق ليتم بعدها تاكيد الطلب وشراء المنتج , يعني في الخاصية Action نضع المسار الذي سنرسل البيانات اليه مثلا /cart هذا فقط ما يخصنا ك Front-end اما طريقة ارسال البيانات والامور الاخرى ليس من اختصاصنا .
الخاصية الثانية تقبل عدة قيم لكن ما يهمنا نحن ك Front-end هما خصيتان فقط وهما Get و Post هذين الخاصيتين ما يهمنا فيهما انه في حال قمت بوضع ال Method تساوي Post عندما ترسل البيانات في الفورم لا تضهر في الرابط الخاص بالموقع لكن عندما تكون ال Method تساوي Get فالبيانات تضهر في الرابط على الشكل التالي : example.com/name=ahmed&&email=ahmed@email.com فما هي الخاصية التي يجب استخدامها ؟ كل Method تستخدم في حالات معينة فمثلا عندما تكون البيانات التي يتم ارسالها حساسة مثل الباسوورد والاميل في حالة تسجيل الدخول يفضل استخدام Post وفي حالة ارسال بيانات غير حساسة مثلا عند البحث عن كلمة ما في الموقع يفضل استخدام Get لتضهر الكلمة في الرابط وهذا يعطي تجربة جيدة للمستخدم .
بعد ان فهمنا اساسيات الفورم Form الان حان الوقت للتعرف على حقول الادخال Inputs لكن قبل البدء يجب ان نعرف بنية حقول الادخل والخاصيات التي تحتويها
<form action="" method="">
<input type="" name="" id="" required placeholder="">
</form>
اولا يتم كتبابة حقول الادخال عن طريق Tag Input و حقل الادخل عنده فقط وسم بداية ولا يمكلك وسم نهاية كما في الفورم Form يكتب على شكل <form></form> لكن حقول الادخال تمتلك وسم بداية فقط <input> وفي الدروس القادمة سنتعرف على المزيد من عناصر Html التي لا تحتوي على وسم الاغلاق , اما بالنسبة للخاصيات Proprtys فهي على الشكل التالي :
- خاصية Type هي من اهم الخاصيات في حقول الادخال وهي التي تحدد نوع الحقل هل هو نص ام باسوورد ام بريد الكتروني email ..
- خاصية name هي تعطي اسم للحقل وهي مهمة جدا فاسم الحقل هو الذي يضهر في الرابط في حالة ال Method تساوي Get كما هو موضح اعلاه .
- خاصية id هي ايضا خاصية مهمة لاضافة تنسيقات لحقل الادخال او لربط حقل الادخال ب Label .
- خاصية required هذه الخاصية هي تحدد هل الحقل ضروري ام اختياري فمثلا لو حاولت ارسال البيانات ولم تقم بملئ حقل ادخال ضروري فلن يتم ارسال البيانات .
- خاصية value هذه الخاصية هي لاضافة قيمة مسبقة لحقل الادخل ويمكن للمستخدم ازالتها وكتابة بيانات اخرى او الاحتفاض بها وارسالها .
- خاصية placeholder هذه الخاصية هي تعطي تلميح للمستخدم لما سيكتبه في حقل الادخل سواء كا الرقم السري او البريد الالكتروني وبمجرد البدء بالكتابة يختفي ال placeholder ويكون بكتابة خافتة نوعا ما كما هو في الصورة ادناه.
- حقل Text هذا الحقل يمكن كتابة فيه ما تشاء من البيانات سواء كانت حروف او اورقام او رموز او كلاهما .
- حقل Email هذا الحقل مخصص لكتابة الاميل او البريد الالكتروني ولا يقبل اي بيانات اخرى غير البريد الالكتروني .
- حقل Number هذا الحقل يقبل فقط بينات عبارة على ارقام فقط ولا يقبل النصوص او الرموز .
- حقل Password حقل الباسوورد او الرقم السري هو من الحقول التي يتم استخدامها كثيرا ويقبل جميع انواع البيانات من ارقام ونصوص لكن المميز فيه يقوم باخفاء المحتوى المكتوب فيه ويحوله لنقاط لكي يتم اخفاء الرمز السري .
لكي تقوم باختيار نوع الحقل الذي تريده يكفي كتابة الاسم في خاصية Type , اغلبكم هنا سيطرح سؤالا وهو لماذا نستخدم كل هذه الانواع من الحقول ولا نكتفي فقط بحقل النص لانه يقبل جميع انواع البيانات ؟ الجواب يتم اختيار نوع كل حقل من اجل التحقق من االبيانات او ال Validation مثلا اذا كانت كل الحقول عبارة على نوع text فسيقوم بعض المستخدمين بكتابة في حقل ال Email نص عادي وليس email بعدها سيتم تخزينه في قواعد البيانات وهذا سيخلق لنا مشاكل لا منتهية ابدا لذالك نضع حقل من نوع email وعندما نكتب فيه نص عادي يعطينا تنبيه انه هذا النص لا يعتبر email ولا يتم قبول البيانات حتى تكتب البيانات الصحيحة وهذا ما يسمى بال Validation .
انواع الحقول هذه التي قمنا بشرحها اعلاه هم فقط انواع الحقول التي تقبل بيانات مكتبوبة , هذا يعني انه هناك انواع من الحقول لا تقبل بيانات مكتبوبة ؟ نعم عزيزي هناك انواع اخرى من الحقول تقبل نوع مختلف من البيانات وهي غير مكتبوبة وسنتعرف على بعضها في هذه الفقرة .
- حقل chexbox هذا الحقل فهو اختيارات يمكن التاكيد عن الخيارات التي ترغب بها بالضغض عنها وهذا النوع من الحقول يقبل تاكيد اكثر من خيار ويكون على شكل مربع .
- حقل radio هذا الحقل ايضا هو عبارة على حقل الاختيارات وتقوم بالتاكيد على الخيار الذي تريده لكن الفرق ان هذا النوع من الحقول يقبل خيار واحد ويكون على شكل دائري .
- حقل color هذا الحقل يعطيك الخيار لتختار الون الذي ترغب به .
- حقل file هذا الحقل معروف ومتواجد في كل مكان وهو لتحميل الملفات من الجهاز وارسالها لاطراف معينة .
- حقل submit هذا الحقل عبارة على زر بالضغط عليه يرسل جميع بيانات الفورم Form .
- حقل date هذا الحقل يجعلك تختار تاريخ معين .
- حقل datetime هذا الحقل يوفر لك امكانية اختيارة تاريخ و وقت معين .
هذه اهم حقول الادخل التي يجب ان تعرفها ولاختيار اي حقل يكفي ادخال اسم الحقل في خاصية type , والى هنا نصل الى نهاية درسنا اليوم .