النماذج في لغة البرمجة HTML

اقرأ في هذا المقال


مفهوم النماذج في لغة البرمجة HTML:

النموذج (Form) في لغة البرمجة (HTML) هو عبارة عن مجموعة من العناصر التي توضع في الصفحة بهدف جعل المستخدم يدخل بيانات فيها ويتم استخدام النماذج في مختلف لغات البرمجة أيضاً، ومن الأمثلة الشائعة التي نتعامل فيها مع نماذج هي صفحات تسجيل الدخول لموقع معين وصفحات إنشاء حساب جديد أو إضافة تعليق أو إضافة منشور معين، والفكرة الرئيسية من النماذج بشكل عام هي تجميع المعلومات التي يدخلها المستخدم  و إرسالها دفعة واحدة للمكان الذي سيتم الحفظ فيه.

الخصائص التي يمكن وضعها في النموذج في لغة البرمجة HTML ودور كل منها:

كيفية إضافة نموذج في الصفحة:

بشكل عام نستخدم الوسم (<form>) على النحو التالي لإضافة نموذج في الصفحة

<form><!-- هنا يجب إضافة كل العناصر التابعة للنموذج الذي نريد إضافته --></form>

إضافة زر لإرسال محتوى النموذج:

كل نموذج تقوم بإضافته يجب أن تضع فيه زر واحد نوعه (submit) على النحو التالي (<inputtype=“submit>) بهدف إعلام المتصفح أن هذا الزر يتم استخدامه لإرسال البيانات المدخلة في النموذج إلى الموقع، وعند النقر على زر من هذا النوع يتوقع المتصفح أنه يجب عرض صفحة جديدة للمستخدم استناداً للبيانات التي تم تمريرها للنموذج.

تحديد أسلوب إرسال بيانات النموذج:

عند إرسال بيانات النموذج للموقع المخصص يجب تحديد الأسلوب الذي سيتم اعتماده لنقل البيانات و هنا يوجد أسلوبين أساسيين هما (post) و (get)، ولتحديد أسلوب إرسال البيانات في النموذج نضيف الخاصية (method) و نمرر لها إما القيمة (get) وإما القيمة (post) كالتالي:

<!-- get كيفيةاستخدام أسلوب --><formmethod="get"><!-- post إذا كنا سنستخدم أسلوب --><formmethod="post">

معلومات تقنية عن أسلوب get:

  • البيانات التي يتم إدخالها في النموذج يتم إضافتها لرابط الصفحة التي سيتم إرسالها لها.
  • رابط الصفحة محدود بعدد الأحرف حيث لا يمكن أن يتجاوز حجم الرابط 2048 حرفاً.
  • بما أن كل البيانات التي يتم إرسالها تكون مرئية لذلك فإن هذا الأسلوب لا يصلح في حال كانت البيانات المرسلة حساسة مثل كلمة مرور المستخدم.

معلومات تقنية عن أسلوب post:

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

المصدر: HTML FormsHTML

Tag
HTML - FormsHTML Form


شارك المقالة: