كيفية إنشاء نموذج تسجيل الدخول والتسجيل في HTML CSS و JavaScript

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

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

 

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

 

ومرة أخرى بعد النقر فوق زر تسجيل الدخول ، ينزلق نموذج الاشتراك من اليسار إلى الجانب الأيمن يظهر لك نموذج تسجيل الدخول. في هذا النموذج ، يكون كلا نموذجي تسجيل الدخول والاشتراك في نفس الصفحة ويتم ذلك باستخدام القليل من أكواد JavaScript. إذا كنت تشعر بصعوبة فهم ما أقوله ، فيمكنك مشاهدة فيديو تعليمي كامل لهذا النموذج (نموذج تسجيل الدخول والتسجيل بتنسيق HTML).

 

في الفيديو ، شاهدت نموذج تسجيل دخول وتسجيل متحرك تم إنشاؤه باستخدام HTML CSS و JavaScript. أتمنى أن تكون قد فهمت الرموز الأساسية وراء إنشاء هذا النموذج. لقد استخدمت بضعة أسطر من أكواد JavaScript لإكمال هذا النموذج ، بحيث يمكنك بسهولة إنشاء هذا النوع من تسجيل الدخول واستمارة التسجيل بتنسيق HTML حتى لو كنت مبتدئًا.

 

يتم استخدام JavaScript فقط لتحريك النموذج عند النقر على الزر ، كما أن علامة تبويب التبديل التي تنزلق من تسجيل الدخول إلى نص التسجيل والاشتراك في نص تسجيل الدخول تعتمد بالكامل على HTML و CSS الخالص بمساعدة علامة HTML <input type = ”radio”>. إذا أعجبك نموذج تسجيل الدخول هذا وترغب في الحصول على رموز أو ملفات المصدر ، فيمكنك الحصول عليها من أسفل هذه الصفحة.

 

نموذج تسجيل الدخول والتسجيل بصيغة HTML

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

الملفات

ما هو رد فعلك؟

like

dislike

love

funny

angry

sad

wow