"نموذج إدخال بيانات تفاعلي باستخدام HTML وCSS وJavaScript"

نموذج إدخال بيانات تفاعلي (HTML - CSS - JavaScript)

تم إنشاء هذه الصفحة لتمثل نموذج إدخال بيانات بسيط للمستخدمين، باستخدام تقنيات الويب الأساسية:

HTML: لتصميم هيكل الصفحة والذي يحتوي على:

نموذج إدخال بيانات يشمل الاسم، العمر، والإيميل.

جدول أسفل النموذج لعرض البيانات المُضافة من قبل المستخدم.

CSS: لتنسيق الصفحة وتحسين تجربة المستخدم من خلال:

استخدام ألوان هادئة وخلفية بلون أزرق فاتح.

تصميم صندوق النموذج بشكل مركزي مع ظل خفيف.

تخصيص أزرار "Add" و"Reset" بلون أزرق ملفت لتسهيل الاستخدام.

تنسيق الجدول بشكل واضح ومنظم مع تمييز الصف الرئيسي.

JavaScript: لإضافة التفاعل والديناميكية، بحيث:

يتم التقاط البيانات من الحقول عند الضغط على زر "Add".

تُعرض البيانات مباشرة داخل الجدول أسفل النموذج.

زر "Reset" يقوم بإفراغ الحقول لتسهيل إدخال بيانات جديدة.

يتم التحقق من إدخال الحقول قبل الإضافة لضمان سلامة البيانات.

️ الهدف من المشروع: تدريب عملي على الجمع بين HTML وCSS وJavaScript لإنشاء نموذج تفاعلي يمكن استخدامه في التطبيقات الصغيرة مثل نماذج التسجيل أو جمع البيانات من المستخدمين.