إنشاء نموذج تسجيل دخول وتسجيل حساب باستخدام HTML وCSS وJavaScript
مرحباً بك عزيزي القارئ، أتمنى أن تكون بخير وتبدع في إنشاء مشاريع رائعة. اليوم في هذه المقالة، أقدم لك مشروعاً استثنائياً ومميزاً. كما تعلم، قمت سابقاً بإنشاء العديد من تصاميم النماذج (Forms) المختلفة، ولكن اليوم لدي مشروع خاص ستجده ممتعاً ومفيداً.
نبذة عن المشروع
سنقوم اليوم ببناء نموذج تسجيل دخول وتسجيل حساب جديد بتصميم متجاوب باستخدام HTML وCSS وJavaScript. يتميز هذا المشروع بخاصية التبديل بين النموذجين. فعند النقر على رابط تسجيل الدخول يظهر نموذج تسجيل الحساب، والعكس صحيح. بالإضافة إلى ذلك، يحتوي المشروع على ميزة إظهار وإخفاء كلمة المرور بطريقة سهلة.
فكرة النماذج
- نموذج تسجيل الدخول: هو النموذج الذي يستخدمه المستخدمون لإدخال بياناتهم (البريد الإلكتروني وكلمة المرور) للوصول إلى الموقع أو التطبيق.
- نموذج التسجيل: يُستخدم لإنشاء حساب جديد، حيث يقوم المستخدم بإدخال بياناته المطلوبة لإنشاء الحساب.
محتويات المشروع
نموذج تسجيل الدخول
- يحتوي على حقلين:
- البريد الإلكتروني: يقوم المستخدم بإدخال بريده الإلكتروني.
- كلمة المرور: يمكن للمستخدم إدخال كلمة المرور الخاصة به، وستظهر في البداية على شكل نقاط. يمكن إظهار الأحرف بالنقر على أيقونة العين بجانب الحقل.
- يحتوي على:
- رابط "نسيت كلمة المرور".
- زر "تسجيل الدخول".
- رابط للانتقال إلى نموذج التسجيل.
نموذج التسجيل
- يحتوي على ثلاثة حقول إدخال:
- البريد الإلكتروني: يقوم المستخدم بإدخال بريده الإلكتروني لإنشاء الحساب.
- كلمة المرور: يتم إدخال كلمة المرور الجديدة.
- تأكيد كلمة المرور: لإعادة إدخال كلمة المرور للتأكيد.
- يحتوي على:
- زر "إنشاء حساب".
- رابط للانتقال إلى نموذج تسجيل الدخول.
المزايا الإضافية
- خاصية التبديل بين النموذجين:
- عند النقر على رابط تسجيل الحساب، يظهر نموذج التسجيل ويختفي نموذج تسجيل الدخول.
- عند النقر على رابط تسجيل الدخول، يعود نموذج تسجيل الدخول للظهور.
- تصميم متجاوب:
- يتناسب التصميم مع جميع أحجام الشاشات، سواء الهواتف المحمولة أو أجهزة الكمبيوتر المكتبية.
- إظهار وإخفاء كلمة المرور:
- ميزة رائعة تتيح للمستخدم رؤية الأحرف أو إخفاءها عند إدخال كلمة المرور.
مثال عملي
في المشروع، يوجد قسم على اليسار يعرض نموذج تسجيل الدخول، بينما يظهر نموذج تسجيل الحساب على الجانب الأيمن. تحتوي النماذج أيضاً على أزرار وسائل التواصل الاجتماعي لتوفير تجربة استخدام أكثر تكاملاً.
النتيجة
يمكنك استخدام هذا المشروع لتصميم مواقعك أو تطبيقاتك. وإذا كنت ترغب في جعل النماذج ديناميكية وتعمل بكامل وظائفها، يمكنك إضافة لغات برمجة للخلفية مثل PHP أو Node.js لمعالجة بيانات المستخدم.
إذا كنت بحاجة إلى معاينة المشروع أو الاطلاع على الكود، يمكنك زيارة العرض التوضيحي الكامل [Login & Signup Form].
إنشاء نموذج تسجيل دخول وتسجيل حساب باستخدام HTML وCSS وJavaScript
لقد قمت بتوفير جميع أكواد HTML وCSS وJavaScript التي استخدمتها لإنشاء نموذج تسجيل الدخول وتسجيل الحساب. قبل الانتقال إلى ملفات الأكواد، سأشرح طريقة عمل المشروع.
شرح المشروع
نموذج تسجيل الدخول:
- يحتوي على حقلين:
- البريد الإلكتروني.
- كلمة المرور.
- أسفل الحقول، يوجد زر لاسترجاع كلمة المرور (نسيت كلمة المرور).
- أسفل الزر، يوجد رابط لإنشاء حساب جديد، بالإضافة إلى زرين لوسائل التواصل الاجتماعي لتسجيل الدخول.
- عند النقر على رابط "إنشاء حساب"، يختفي نموذج تسجيل الدخول ويظهر نموذج تسجيل الحساب.
نموذج تسجيل الحساب:
- يحتوي على ثلاثة حقول:
- البريد الإلكتروني.
- إنشاء كلمة المرور.
- تأكيد كلمة المرور.
- أسفل الحقول، يوجد زر "إنشاء حساب".
- تحت الزر، يوجد رابط للانتقال إلى نموذج تسجيل الدخول، بالإضافة إلى زرين لوسائل التواصل الاجتماعي.
التقنيات المستخدمة
- HTML وCSS: تم استخدامهما لتصميم واجهة المستخدم للنموذجين.
- JavaScript: تم استخدامه لإظهار وإخفاء النماذج عند النقر على روابط تسجيل الدخول وتسجيل الحساب، ولإظهار وإخفاء كلمة المرور.
خطوات إنشاء النموذج
للحصول على الأكواد، ستحتاج إلى إنشاء ثلاثة ملفات:
- ملف HTML: لهيكلة المحتوى.
- ملف CSS: لتصميم واجهة المستخدم.
- ملف JavaScript: لإضافة التفاعل والوظائف الديناميكية.
استعراض المشروع
هذا النموذج بسيط وسهل الاستخدام، ولكنه يقدم لمسة احترافية لأي موقع. سواء كنت مصمم مواقع مبتدئ أو محترف، يمكنك استخدام هذا النموذج كنقطة انطلاق لتعلم المزيد عن تصميم واجهات المستخدم.
يمكنك زيارة الموقع لتحميل الأكواد والتعرف أكثر على المشروع.