بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
السلام عليكم ورحمة الله وبركاته
سنتناول في هذا الدرس ، إن شاء الله ، موضوع الحقول Forms ، والمقصود بها تلك الحقول التي يطلب منك ملؤها عند التسجيل في موقع ، أو تسجيل دخول ، أو بحث ، وتلك المربعات والدوائر التي يطلب منك التأشير عليها ، والقوائم التي تختار منها.
ولإنشاء فورم نكتب أولا العلامة الزوجية الأم form وهي المسؤولة عن جمع معلومات كل العلامات الموجودة ضمنها وتنفيذها ، طبعا بعد برمجتها بلغة برمجة مثل php ، وضمنها نستخدم العلامة الفردية input أكثر من مرة والتي تتغير وظيفتها بتغير خاصية type لديها ، وضمن form أيضا نستخدم علامات زوجية مثل textarea و select .
ومع العلامة form نستخدم خاصية action وندع قيمتها فارغة لأن المبرمج هو الذي يضعها، و نستخدم الخاصية method وتأخذ إحدى القيمتين post أو get ، والأكثر استخداما هي post لأنها أكثر أمانا ، وتستخدم get عادة مع فورم البحث.
ومع العلامة الفردية input كما قلنا نستخدم الخاصية type ، ويتغير الحقل مع تغير قيمة هذه الخاصية ، وسنوضح أهمها في الصور التالية:
في حالة type=text حصلنا على حقل لكتابة أي شيء : بريد إلكتروني ، إسم مستخدم ، رقم هاتف...
وفي حالة type=password حصلنا على حقل مشفر ، ولأنني كتبت فيه بالفعل يظهر المحتوى في الصورة على شكل نقط.
وفي حالة type=submit حصلنا على زر إرسال البيانات.
وفي حالة type=reset حصلنا على زر مسح البيانات من الحقول أعلاه.
وفي حالة type=button حصلنا على زر عادي يمكن استغلاله بأي طريقة ، بالبرمجة طبعا.
وكما ترى في حالة type=radio حصلنا على تلك الدوائر التي نستطيع أن نختار واحدة منها فقط ، وسنرى لا حقا كيف نجعلها تحذف التأشير عن الأولى إذا أضفناه للثانية.
وفي حالة type=checkbox حصلنا على تلك المربعات التي نستطيع أن نختار منها قدر ما نشاء.
بالنسبة لفورم رفع الملفات فهو مختلف قليلا:
طالما أن الفورم لرفع الملفات فلا بد أن تضيف إلى العلامة form خاصية enctype وتضع لها القيمة multipart/form-data هذه من الثوابت.
حصلنا على زر رفع الملفات بوضع type=file للعلامة input ، وهذا الزر يؤدي إلى ملفات جهازك بمجرد الضغط عليه ، وبالضغط على زر submit تنفذ عملية الرفع ، هذا هو المفترض بعد برمجة الفورم.
وللحصول على حقل لكتابة النصوص ، نستخدم العلامة الزوجية textarea ، وللتحكم في عرض وارتفاع ظهورها ، نضع لها الخاصية cols التي تمثل عدد الأسطر عموديا ، وخاصية rows التي تمثل عدد الأسطر أفقيا :
ومن العلامات الزوجية التي تستخدم مع الفورم ، العلامة الزوجية select وضمنها العلامة الزوجية option وتستخدم لعرض خيارات متعددة نختار منها واحدة:
بمجرد الضغط على السهم تنسدل قائمة تختار منها.
وإذا أردنا قائمة مقسمة إلى مجموعات ، نستخدم العلامة الزوجية optgroup ونضع لها خاصية label التي تأخذ قيمة إسم المجموعة:
نكتفي بهذا القدر اليوم ، فموضوع الفورمز كبير جدا ، وقد اكتفينا في هذا الدرس بالتعرف على أهم علامات الفورمز وبعض الخصائص ، وفي الدرس القادم سنتعرف على المزيد من الخصائص وسنصنع معا ثلاث ملفات :
enregister.html
login.html
search.html
upload.html
لا تنسى التدريب على كتابة الأكواد.
دمتم في رعاية الله وحفظه.