كيفية إنشاء نموذج HTML (تم شرح الأمثلة)

تُستخدم النماذج لجمع البيانات من المستخدمين ، مثل معلومات الاتصال ، أو للسماح للمستخدمين بالتفاعل مع موقع الويب ، مثل نشر التعليقات أو إجراء عمليات البحث. في هذه المقالة ، سوف نتعلم كيفية إنشاء نموذج أساسي باستخدام HTML.

هيكل نموذج HTML

يتم إنشاء نموذج HTML باستخدام العلامة. ضمن هذه العلامة ، يمكن أن يكون لديك مجموعة متنوعة من عناصر الإدخال المختلفة ، مثل حقول النص والأزرار ومربعات الاختيار وأزرار الاختيار والمزيد.

عناصر الإدخال تذهب هنا

عناصر الإدخال

حقول النص

يتم إنشاء الحقول النصية باستخدام العلامة مع السمة يكتب وضعت على نص. على سبيل المثال:

اسم:




هاتف

العنصر تستخدم لحقول إدخال رقم الهاتف.

هاتف:


تاريخ

العنصر تستخدم لتحديد التاريخ.

تاريخ الميلاد:


كلمة المرور

العنصر تستخدم لحقول إدخال كلمة المرور. يتم عرض النص الذي تم إدخاله في هذا الحقل كنقاط لإخفاء كلمة المرور.

كلمة المرور:


أرشيف

العنصر يستخدم للسماح للمستخدم بتحديد ملف من نظام الملفات المحلي الخاص به.

رفع ملف:


خانة الاختيار

العنصر تستخدم لحقول الإدخال التي تسمح للمستخدم بتحديد لا شيء أو خيار واحد أو خيارات متعددة.

أوافق على الشروط والأحكام

مذياع

العنصر تستخدم لحقول الإدخال التي تسمح للمستخدم بتحديد خيار واحد من مجموعة من الخيارات.

جنس:

رجل

نحيف

رقم

العنصر تستخدم لحقول الإدخال الرقمية.

كمية:


يتراوح

العنصر تستخدم لحقول الإدخال التي يجب أن تحتوي على قيمة من نطاق من القيم.

مقدار:




أزرار

يتم إنشاء الأزرار باستخدام العلامة مع السمة يكتب وضعت على يُقدِّم. هذا الزر ، عند الضغط عليه ، سيرسل بيانات النموذج. على سبيل المثال:

اسم:




معالجة إدخال النموذج

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

طريقة GET

ترسل طريقة GET بيانات النموذج كجزء من عنوان URL. إنه مفيد لأشياء مثل عمليات البحث ، حيث لا تكون بيانات النموذج حساسة. ومع ذلك ، فإن هذه الطريقة لها قيود من حيث طول البيانات التي يمكن إرسالها.

عناصر الإدخال تذهب هنا

طريقة POST

ترسل طريقة POST بيانات النموذج منفصلة عن عنوان URL. هذا أكثر أمانًا ويمكنه التعامل مع كمية أكبر من البيانات ، لذلك يتم استخدامه لأشياء مثل عمليات إرسال نموذج الاتصال أو تسجيل الدخول.

عناصر الإدخال تذهب هنا

في كلتا الحالتين ، السمة فعل يستخدم لتحديد عنوان URL للبرنامج النصي من جانب الخادم الذي سيعالج بيانات النموذج.

مثال على شكل HTML مع جميع العناصر 

إليك نموذج يستخدم جميع العناصر التي راجعناها في هذه المقالة:

إستمارة تسجيل

اسم:



اسم العائلة:



بريد إلكتروني:



هاتف:



تاريخ الميلاد:



كلمة المرور:



رفع ملف:



أوافق على الشروط والأحكام


جنس:

رجل

نحيف

كمية:



مقدار:




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

الزر "إرسال" في النهاية هو الزر المسؤول عن إرسال النموذج إلى عنوان URL المحدد في السمة فعل من التسمية شكل (في هذه الحالة ، "/ submit_form"). لكي يعمل هذا النموذج على موقع ويب حقيقي ، ستحتاج إلى تكوين خادم لتلقي ومعالجة المعلومات من هذا النموذج في مسار "/ submit_form".