النماذج في HTML

تريد التواصل مع زوار موقعك؟ إذن لابد من احتواء موقعك على صفحة تقوم بهذة الوظيفة، صفحة تحتوي على مجموعة من الحقول يقوم الزائر بملئها وإرسالها لك.

توفر النماذج في HTML العديد من الحقول المختلفة التي يمكنك استخدامها على حسب نوع البيانات التي تريد الحصول عليها من زوار موقعك.

بعض النماذج التفاعلية التي تتعرض لها بصورة مستمرة عند تصفحك الويب:

• نماذج تسجيل عضو جديد، أو تسجيل الدخول في بعض المواقع
• إدخال بياناتك الشخصية (الإسم، العنوان، تاريخ الميلاد،،).
• نموذج البحث في معظم المواقع.
• رفع الملفات.

هذة بعض النماذج فقط، وهناك الكثير من الأمثلة الأخرى التي قد تعرض لها، وكي تتمكن من بناء هذة الأمثلة التفاعلية، توفر لك HTML النماذج والعديد من الحقول التي تستخدمها داخلها:

• حقول الإدخال النصية
• حقول الإختيار من متعدد (radio buttons)
• حقول الإختيار المتعدد (checkbox)
• حقول القوائم المنسدلة (اختيار مفرد أو متعدد)
• حقول رفع الملفات.
• أزرار الإرسال.

هذة الحقول لها وسوم وخواص خاصة بها، لكن الأكثر استخداماً هو الوسم <input> .

الوسم <input> منغلق ذاتياً، لذلك يتم تعيين كل المعلومات عن الحقل من خلال الخواص, ويتم تحديد نوع الحقل من خلال الخاصية type:

العنصر form

تم إنشاء النماذج (forms) لتقوم بجمع مدخلات المستخدمين، العنصر <form> من عناصر الـ block-level، يقوم هذا العنصر بتعريف الجزء التفاعلي في صفحة الويب، وجميع حقول النماذج <input>، <textarea> ، <button> يجب أن تكون داخل هذا الوسم.

هناك خصائص  لابد من تواجدهما في العنصر <form> حتى تكتمل وظيفتة:

1. action: تحتوي على رابط الصفحة التي ستذهب إليها عندما تقوم بالضغط على زر إرسال.
2. method: تحدد كيفية إرسال البيانات التي تم إدخالها في النموذج، ولها طريقتين، GET و POST.

وعادةً ترسل هذة البيانات إلى المستضيف (Server) حيث يتم تخزينها هناك. ويتم معالجة هذة البيانات بإستخدام لغات البرمجة التي تعمل على المستضيف مثل PHP

إذن فالنموذج يتكون من مجموعة من الحقول تعمل مع بعضها البعض لإنجاز وظيفة معينة، على سبيل المثال، نموذج تسجيل الدخول في كل المواقع تقريباً يتكون من ثلاثة حقول:

1. حقل إدخال الإسم أو البريد الإلكتروني.  <“input type=”text>  أو <“input type=”email>.
2. حقل إدخال كلمة المرور <“input type=”password> .
3. زر الإرسال <“input type=”submit>.

الحقول الثلاثة لابد أن يكونوا موجودين داخل نموذج واحد <“form action=”/login” method=”POST> وهكذا يمكنك بناء أي نموذج آخر.

حقول الإدخال النصية Text Inputs

في الغالب، لا يخلو أي نموذج من حقول الإدخال النصية، وتأخذ أشكال متعددة:

الحقول النصية متشابه إلى حد كبير مع بعضها البعض، ويمكنك استخدام الحقل ذات النوع text لإدخال اي نوع من البيانات، لكن تذكر قاعدة الـ Semantic Code وهي أن كل عنصر لابد أن يحمل دلالة عن المحتوى الموجود بداخلة إن أمكن ذلك، وهذا ما توفره HTML 5 ، فعندما تقوم بإدخال بريد إلكتروني بصيغة خاطئة كأن تنسى مثلاً كتابة الرمز @ يقوم المتصفح بشكل إفتراضي بإظهار تنبيه يخبرك بأن البريد الذي أدخلته خاطئ.

أيضاً الحقل Password يظهر نقاط بدلاً من الحروف الموجودة بداخلة هكذا:

أيضاً حقل الأرقام Number لا يسمح لك بإدخال أي نصوص سوى الأرقام (باللغة الإنجليزية فقط) وعند تمرير المؤشر على الحقل يظهر سهمين يمكنك زيادة/نقصان القيمة من خلالهما هكذا: