النماذج في HTML

النماذج في HTML

الجزء التفاعلي في صفحة الويب

تقديم

كتب هذا المقال أشرف عبدالدايم مطور واجهة المستخدم في TieLabs سابقاً، 95% من كود CSS الموجود في قالب جنة من كتابة أشرف :)

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

توفر النماذج في 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 مثال: <“input type=”text> يسمح بإدخال أي نوع من الحروف
 النوع Email مثال: <“input type=”email> في حالة إدخال بريد إلكتروني خاطئ يقوم بإظهار تنبيه
 النوع Password مثال: <“input type=”password> يقوم بإظهار نقاط بدلاً من الحروف
 النوع Number مثال: <“input type=”number> لتحديد صيغ معينة لرقم التليفون
 النوع Textarea مثال: <textarea></textarea> تسمح بإدخال أكثر من سطر من النصوص، ويمكنك تمديد مربع الإدخال عمودياً وأفقياً.

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

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

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

مثال على النماذج:

١ بيانات الترشح




٢ معلومات إضافية

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

أشرف عبدالدايم

مصري، أب، مطور واجهة المستخدم في TieLabs سابقاً، أحب كتابة المقالات التعليمة وأشعر أنها واجب على كل المهتمين بالمجال، حتى يتم توفير محتوى عربي لائق يساهم بشكل فعال في بناء جيل من المطورين والمبرمجين والمصميمن تعلّم بطريقة صحيحة منذ بداية رحلته التعليمية.
زر الذهاب إلى الأعلى
إغلاق