كيفية إنشاء واستخدام النماذج وحقول الإدخال في HTML لجمع بيانات في صفحة الويب

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

الدرس: كيفية إنشاء واستخدام النماذج وحقول الإدخال في HTML لجمع بيانات في صفحة الويب

المدة: 5 دقائق

وصف مختصر:

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

وصف الدرس

ما هي النماذج (Forms) في HTML؟


النماذج (Forms) هي جزء أساسي من أي موقع ويب أو صفحة ويب تفاعلية. من خلال النماذج، يمكن للمستخدمين إدخال بياناتهم وإرسالها إلى الخادم (server) للمعالجة. تعتبر النماذج أداة مهمة في جمع البيانات من المستخدمين، مثل البيانات الشخصية، الآراء، أو طلبات الاتصال.

كيف تستقبل البيانات من المستخدم عبر الموقع أو صفحة الويب؟


لجمع البيانات من المستخدمين عبر موقعك، يمكنك استخدام النماذج المكونة من حقول الإدخال (Input Fields). يمكن للمستخدمين إدخال بياناتهم في هذه الحقول، مثل الأسماء، عناوين البريد الإلكتروني، الرسائل، وغيرها. يتم إرسال هذه البيانات عند الضغط على زر الإرسال (Submit) إلى الخادم لمعالجتها.

كيفية استقبال الرسائل من المستخدم عبر حقول الإدخال في الموقع أو صفحة الويب


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

مثال على نموذج "اتصل بنا" على الموقع الأوروبي


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

كيفية استخدام خاصية "مطلوب" (Required) في حقول الإدخال


لضمان أن المستخدم لن يغادر أي حقل إدخال فارغًا، يمكنك استخدام خاصية "مطلوب" (Required) داخل وسوم الإدخال. هذه الخاصية تجبر المستخدم على ملء الحقول قبل أن يتمكن من إرسال النموذج. على سبيل المثال، إذا كان حقل البريد الإلكتروني مطلوبًا، فلن يتمكن المستخدم من إرسال النموذج إلا بعد إدخال بريد إلكتروني صالح.

أمثلة إضافية على النماذج مثل نموذج الاشتراك في النشرة الإخبارية ونماذج أخرى


النماذج ليست مقتصرة على الاتصال فقط، بل يمكنك استخدام النماذج لجمع بيانات الاشتراك في النشرة الإخبارية (Newsletter). يمكن للمستخدمين إدخال بريدهم الإلكتروني للاشتراك في النشرة، ويتم إرسال البيانات إلى الخادم لإضافتها إلى قاعدة البيانات. النماذج الأخرى تشمل نماذج التسجيل، الاستبيانات، وغيرها.

الفيديوهات

سجل دخول وتأكد من اشتراكك في هذا البرنامج الدراسي للوصول إلى الأدوات والمواد التدريبية و الفيديوهات

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

المصادر

ملحقات ال PDF

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

has been added to the cart. View Cart