css form – CodingNepal

Create Website with Login & Registration Form in HTML CSS and JavaScript

CodingNepal — Thu, 31 Aug 2023 18:33:30 +0000

If you’re new to web development, creating a website with login and registration forms is an excellent way to learn and practice basic skills like designing a navigation menu bar, creating a website homepage, and building login and registration forms.

In this blog post, I’ll guide you through the process of creating a responsive website with login and registration forms using HTML, CSS, and JavaScript. By completing this project, you’ll gain practical experience and learn essential web development concepts like DOM manipulation, event handling, conditional statements, and more.

In this project, the website’s homepage features a navigation bar and a login button. When you click on the button, a login form will popup with a cool blurred background effect. The form has an image on the left and input fields on the right side. If you want to sign up instead, simply click on the sign-up link and you’ll be taken to the registration form.

The website’s navigation bar and forms are completely responsive. This means that the content will adjust to fit any screen size. On a smaller screen, the navigation bar will pop up from the right side when the hamburger button is clicked and in the forms the left image section will remain hidden.

Video Tutorial of Website with Login & Registration Form

If you enjoy learning through video tutorials, the above YouTube video is an excellent resource. In this video, I’ve explained each line of code and included informative comments to make the process of creating your own website with login and registration forms beginner-friendly and easy to follow.

However, if you like reading blog posts or want a step-by-step guide for this project, you can continue reading this post. By the end of this post, you’ll have your own website with forms that are simple to customize and implement into your other projects.

Steps to Create Website with Login & Registration Form

To create a responsive website with login and registration forms using HTML, CSS, and vanilla JavaScript, follow these simple step-by-step instructions:

First, create a folder with any name you like. Then, make the necessary files inside it.
Create a file called index.html to serve as the main file.
Create a file called style.css to hold the CSS code.
Create a file called script.js to hold the JavaScript code.
Finally, download the Images folder and place it in your project directory. This folder contains all the images you’ll need for this project.

To start, add the following HTML codes to your index.html file. These codes include all essential HTML elements, such as header, nav, ul, form, and more for the project.





    
    
    Website with Login and Registration Form | CodingNepal
    
    
    
    


    
        
            menu
            
                
                CodingNepal
            
            
                close
                Home
                Portfolio
                Courses
                About us
                Contact us
            
            
        
    

    
    
        close
        
            
                Welcome Back
                Please log in using your personal information to stay connected with us.
            
            
                LOGIN
                
                    
                        
                        Email
                    
                    
                        
                        Password
                    
                    Forgot password?
                    
                
                
                    Don't have an account?
                    Signup
                
            
        
        
            
                Create Account
                To become a part of our community, please sign up using your personal information.
            
            
                SIGNUP
                
                    
                        
                        Enter your email
                    
                    
                        
                        Create password
                    
                    
                        
                        
                            I agree the
                            Terms & Conditions
                        
                    
                    
                
                
                    Already have an account? 
                    Login

Next, add the following CSS codes to your style.css file to apply visual styling to your website and forms. You can experiment with different CSS properties like colors, fonts, and backgrounds to give a unique touch to your website.

/* Importing Google font - Open Sans */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap");

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Open Sans", sans-serif;
}

body {
    height: 100vh;
    width: 100%;
    background: url("images/hero-bg.jpg") center/cover no-repeat;
}

header {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 10;
    padding: 0 10px;
}

.navbar {
    display: flex;
    padding: 22px 0;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    justify-content: space-between;
}

.navbar .hamburger-btn {
    display: none;
    color: #fff;
    cursor: pointer;
    font-size: 1.5rem;
}

.navbar .logo {
    gap: 10px;
    display: flex;
    align-items: center;
    text-decoration: none;
}

.navbar .logo img {
    width: 40px;
    border-radius: 50%;
}

.navbar .logo h2 {
    color: #fff;
    font-weight: 600;
    font-size: 1.7rem;
}

.navbar .links {
    display: flex;
    gap: 35px;
    list-style: none;
    align-items: center;
}

.navbar .close-btn {
    position: absolute;
    right: 20px;
    top: 20px;
    display: none;
    color: #000;
    cursor: pointer;
}

.navbar .links a {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 500;
    text-decoration: none;
    transition: 0.1s ease;
}

.navbar .links a:hover {
    color: #19e8ff;
}

.navbar .login-btn {
    border: none;
    outline: none;
    background: #fff;
    color: #275360;
    font-size: 1rem;
    font-weight: 600;
    padding: 10px 18px;
    border-radius: 3px;
    cursor: pointer;
    transition: 0.15s ease;
}

.navbar .login-btn:hover {
    background: #ddd;
}

.form-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 10;
    width: 100%;
    opacity: 0;
    pointer-events: none;
    max-width: 720px;
    background: #fff;
    border: 2px solid #fff;
    transform: translate(-50%, -70%);
}

.show-popup .form-popup {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%);
    transition: transform 0.3s ease, opacity 0.1s;
}

.form-popup .close-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    color: #878484;
    cursor: pointer;
}

.blur-bg-overlay {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    height: 100%;
    width: 100%;
    opacity: 0;
    pointer-events: none;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transition: 0.1s ease;
}

.show-popup .blur-bg-overlay {
    opacity: 1;
    pointer-events: auto;
}

.form-popup .form-box {
    display: flex;
}

.form-box .form-details {
    width: 100%;
    color: #fff;
    max-width: 330px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.login .form-details {
    padding: 0 40px;
    background: url("images/login-img.jpg");
    background-position: center;
    background-size: cover;
}

.signup .form-details {
    padding: 0 20px;
    background: url("images/signup-img.jpg");
    background-position: center;
    background-size: cover;
}

.form-box .form-content {
    width: 100%;
    padding: 35px;
}

.form-box h2 {
    text-align: center;
    margin-bottom: 29px;
}

form .input-field {
    position: relative;
    height: 50px;
    width: 100%;
    margin-top: 20px;
}

.input-field input {
    height: 100%;
    width: 100%;
    background: none;
    outline: none;
    font-size: 0.95rem;
    padding: 0 15px;
    border: 1px solid #717171;
    border-radius: 3px;
}

.input-field input:focus {
    border: 1px solid #00bcd4;
}

.input-field label {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    color: #4a4646;
    pointer-events: none;
    transition: 0.2s ease;
}

.input-field input:is(:focus, :valid) {
    padding: 16px 15px 0;
}

.input-field input:is(:focus, :valid)~label {
    transform: translateY(-120%);
    color: #00bcd4;
    font-size: 0.75rem;
}

.form-box a {
    color: #00bcd4;
    text-decoration: none;
}

.form-box a:hover {
    text-decoration: underline;
}

form :where(.forgot-pass-link, .policy-text) {
    display: inline-flex;
    margin-top: 13px;
    font-size: 0.95rem;
}

form button {
    width: 100%;
    color: #fff;
    border: none;
    outline: none;
    padding: 14px 0;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 3px;
    cursor: pointer;
    margin: 25px 0;
    background: #00bcd4;
    transition: 0.2s ease;
}

form button:hover {
    background: #0097a7;
}

.form-content .bottom-link {
    text-align: center;
}

.form-popup .signup,
.form-popup.show-signup .login {
    display: none;
}

.form-popup.show-signup .signup {
    display: flex;
}

.signup .policy-text {
    display: flex;
    margin-top: 14px;
    align-items: center;
}

.signup .policy-text input {
    width: 14px;
    height: 14px;
    margin-right: 7px;
}

@media (max-width: 950px) {
    .navbar :is(.hamburger-btn, .close-btn) {
        display: block;
    }

    .navbar {
        padding: 15px 0;
    }

    .navbar .logo img {
        display: none;
    }

    .navbar .logo h2 {
        font-size: 1.4rem;
    }

    .navbar .links {
        position: fixed;
        top: 0;
        z-index: 10;
        left: -100%;
        display: block;
        height: 100vh;
        width: 100%;
        padding-top: 60px;
        text-align: center;
        background: #fff;
        transition: 0.2s ease;
    }

    .navbar .links.show-menu {
        left: 0;
    }

    .navbar .links a {
        display: inline-flex;
        margin: 20px 0;
        font-size: 1.2rem;
        color: #000;
    }

    .navbar .links a:hover {
        color: #00BCD4;
    }

    .navbar .login-btn {
        font-size: 0.9rem;
        padding: 7px 10px;
    }
}

@media (max-width: 760px) {
    .form-popup {
        width: 95%;
    }

    .form-box .form-details {
        display: none;
    }

    .form-box .form-content {
        padding: 30px 20px;
    }
}

After applying the styles, load the webpage in your browser to view your website. The forms are currently hidden and will only appear later using JavaScript. Now, you will only see the website with the navigation bar and hero image.

Finally, add the following JavaScript code to your script.js file. The code contains click event listeners which can toggle classes on various HTML elements. Although the code is simple and easy to understand, it is recommended to watch the video tutorial above, pay attention to the code comments, and experiment with the code for better understanding.

const navbarMenu = document.querySelector(".navbar .links");
const hamburgerBtn = document.querySelector(".hamburger-btn");
const hideMenuBtn = navbarMenu.querySelector(".close-btn");
const showPopupBtn = document.querySelector(".login-btn");
const formPopup = document.querySelector(".form-popup");
const hidePopupBtn = formPopup.querySelector(".close-btn");
const signupLoginLink = formPopup.querySelectorAll(".bottom-link a");

// Show mobile menu
hamburgerBtn.addEventListener("click", () => {
    navbarMenu.classList.toggle("show-menu");
});

// Hide mobile menu
hideMenuBtn.addEventListener("click", () =>  hamburgerBtn.click());

// Show login popup
showPopupBtn.addEventListener("click", () => {
    document.body.classList.toggle("show-popup");
});

// Hide login popup
hidePopupBtn.addEventListener("click", () => showPopupBtn.click());

// Show or hide signup form
signupLoginLink.forEach(link => {
    link.addEventListener("click", (e) => {
        e.preventDefault();
        formPopup.classList[link.id === 'signup-link' ? 'add' : 'remove']("show-signup");
    });
});

Conclusion and Final words

In conclusion, creating a website’s homepage that features forms is a hands-on experience to learn various website components and fundamental web development concepts. I believe that by following the steps outlined in this blog post, you’ve successfully created your own website with login and registration forms using HTML, CSS, and JavaScript.

To further improve your web development skills, I recommend you try recreating other websites and login form projects available on this website. This will give you a better understanding of how HTML, CSS, and JavaScript are used to create unique website components.

If you encounter any problems while creating your website with forms, you can download the source code files for this project for free by clicking the Download button. Additionally, you can view a live demo of it by clicking the View Live button.

How to Create Netflix Login Page in HTML and CSS

CodingNepal — Mon, 03 Jul 2023 14:53:09 +0000

As one of the most popular streaming platforms worldwide, Netflix has a user-friendly login page that captures our attention with its sleek and intuitive design. Have you ever wondered how they create such a visually appealing login page? Well, Look no further!

In this beginner-friendly blog post, I’ll walk you through the process of creating a responsive Netflix login page using only HTML and CSS. You’ll learn how to create interactive and responsive forms, position elements on the page, and style them to match the Netflix aesthetic.

By the end of this blog post, you’ll understand how HTML and CSS work together to create a visually appealing and user-friendly form that looks great on all devices. So, let’s waste no time and start the steps to creating a Netflix login form page!

https://www.codingnepalweb.com/wp-content/uploads/2023/07/How-to-Create-Netflix-Login-Page-in-HTML-and-CSS.mp4

Steps To Create Netflix Login Page in HTML and CSS

To create a Netflix login or sign-in page using HTML and CSS, follow these step-by-step instructions:

Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Download and place the Images folder in your project directory. This folder includes the Netflix logo and the hero background image.

To start, add the following HTML codes to your index.html file: This code includes various elements such as navigation, headings, paragraphs, a form, input fields, a button, and links. I’ve also included default form validation using the required attribute in the input elements.





    
    
    Netflix Login Page | CodingNepal
    


    
        
    
    
        Sign In
        
            
                
                Email or phone number
            
            
                
                Password
            
            
             
                
                    
                    Remember me
                
                Need help?
            
        
        New to Netflix? Sign up now
        
            This page is protected by Google reCAPTCHA to ensure you're not a bot. 
            Learn more.

Next, add the following CSS codes to your style.css file to achieve a design that looks like the Netflix login page. This code includes different styles for elements such as color, font, background, border, etc., and makes the page responsive for all devices. Feel free to customize these styles according to your preferences.

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&display=swap");

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}

body {
    background: #000;
}

body::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0.5;
    width: 100%;
    height: 100%;
    background: url("images/hero-img.jpg");
    background-position: center;
}

nav {
    position: fixed;
    padding: 25px 60px;
    z-index: 1;
}

nav a img {
    width: 167px;
}

.form-wrapper {
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 4px;
    padding: 70px;
    width: 450px;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, .75);
}

.form-wrapper h2 {
    color: #fff;
    font-size: 2rem;
}

.form-wrapper form {
    margin: 25px 0 65px;
}

form .form-control {
    height: 50px;
    position: relative;
    margin-bottom: 16px;
}

.form-control input {
    height: 100%;
    width: 100%;
    background: #333;
    border: none;
    outline: none;
    border-radius: 4px;
    color: #fff;
    font-size: 1rem;
    padding: 0 20px;
}

.form-control input:is(:focus, :valid) {
    background: #444;
    padding: 16px 20px 0;
}

.form-control label {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
    pointer-events: none;
    color: #8c8c8c;
    transition: all 0.1s ease;
}

.form-control input:is(:focus, :valid)~label {
    font-size: 0.75rem;
    transform: translateY(-130%);
}

form button {
    width: 100%;
    padding: 16px 0;
    font-size: 1rem;
    background: #e50914;
    color: #fff;
    font-weight: 500;
    border-radius: 4px;
    border: none;
    outline: none;
    margin: 25px 0 10px;
    cursor: pointer;
    transition: 0.1s ease;
}

form button:hover {
    background: #c40812;
}

.form-wrapper a {
    text-decoration: none;
}

.form-wrapper a:hover {
    text-decoration: underline;
}

.form-wrapper :where(label, p, small, a) {
    color: #b3b3b3;
}

form .form-help {
    display: flex;
    justify-content: space-between;
}

form .remember-me {
    display: flex;
}

form .remember-me input {
    margin-right: 5px;
    accent-color: #b3b3b3;
}

form .form-help :where(label, a) {
    font-size: 0.9rem;
}

.form-wrapper p a {
    color: #fff;
}

.form-wrapper small {
    display: block;
    margin-top: 15px;
    color: #b3b3b3;
}

.form-wrapper small a {
    color: #0071eb;
}

@media (max-width: 740px) {
    body::before {
        display: none;
    }

    nav, .form-wrapper {
        padding: 20px;
    }

    nav a img {
        width: 140px;
    }

    .form-wrapper {
        width: 100%;
        top: 43%;
    }

    .form-wrapper form {
        margin: 25px 0 40px;
    }
}

Conclusion and Final Words

In conclusion, creating a Netflix-inspired login page can be a valuable project for beginner web developers. It provides a great opportunity to dive into various aspects of web development, such as creating responsive forms, styling elements, and even incorporating floating label input animations.

By following the steps outlined in this post, I hope you’re able to create a responsive Netflix login page using only HTML and CSS. To understand the code better, you should experiment with it. To further enhance your web development skills, I recommend you try recreating the other login form designs that are available on this website.

If you encounter any problems while creating your Netflix login page, you can download the source code files for this Netflix login or sign-in page project for free by clicking the Download button. You can also view a live demo of it by clicking the View Live button.

How to Create Facebook Login Page in HTML and CSS

CodingNepal — Fri, 30 Jun 2023 11:19:24 +0000

Creating a Facebook login page can be an exciting and practical project for beginner web developers because Facebook is a widely used social media platform. By recreating its login page, you can learn valuable skills in designing user interfaces that people are already familiar with.

In this blog post, I’ll guide you through how to create a responsive Facebook login page using only HTML and CSS. This project is beginner-friendly, allowing you to gain hands-on experience with these essential languages and styles.

Throughout the process, we’ll explore different HTML tags, such as headers, forms, inputs, and links. We’ll also dive into CSS properties to style our login form, including color, background, and font choice, and make it responsive for all devices.

https://www.codingnepalweb.com/wp-content/uploads/2023/06/How-to-Create-Facebook-Login-Page-in-HTML-and-CSS.mp4

Steps To Create Facebook Login Page HTML & CSS

To create a Facebook login page using HTML and CSS, follow these step-by-step instructions:

Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css

To start, add the following HTML codes to your index.html file: This code includes various elements such as a header for the login page, paragraphs, a form, input fields, a button, and links. I’ve also included default form validation by using the required attribute.




  
    
    
    Facebook Login Page | CodingNepal
    
  
  
    
      
        
          facebook
          Connect with friends and the world 
           around you on Facebook.
        
        
          
          
          
            
            Forgot password?
          
          
          
            Create new account

Next, add the following CSS codes to your style.css file to make it look like the Facebook login page. This code includes different styles for elements such as color, background, and border. Feel free to customize these styles according to your preferences.

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
}

.flex {
  display: flex;
  align-items: center;
}

.container {
  padding: 0 15px;
  min-height: 100vh;
  justify-content: center;
  background: #f0f2f5;
}

.facebook-page {
  justify-content: space-between;
  max-width: 1000px;
  width: 100%;
}

.facebook-page .text {
  margin-bottom: 90px;
}

.facebook-page h1 {
  color: #1877f2;
  font-size: 4rem;
  margin-bottom: 10px;
}

.facebook-page p {
  font-size: 1.75rem;
  white-space: nowrap;
}

form {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1),
    0 8px 16px rgba(0, 0, 0, 0.1);
  max-width: 400px;
  width: 100%;
}

form input {
  height: 55px;
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 6px;
  margin-bottom: 15px;
  font-size: 1rem;
  padding: 0 14px;
}

form input:focus {
  outline: none;
  border-color: #1877f2;
}

::placeholder {
  color: #777;
  font-size: 1.063rem;
}

.link {
  display: flex;
  flex-direction: column;
  text-align: center;
  gap: 15px;
}

.link .login {
  border: none;
  outline: none;
  cursor: pointer;
  background: #1877f2;
  padding: 15px 0;
  border-radius: 6px;
  color: #fff;
  font-size: 1.25rem;
  font-weight: 600;
  transition: 0.2s ease;
}

.link .login:hover {
  background: #0d65d9;
}

form a {
  text-decoration: none;
}

.link .forgot {
  color: #1877f2;
  font-size: 0.875rem;
}

.link .forgot:hover {
  text-decoration: underline;
}

hr {
  border: none;
  height: 1px;
  background-color: #ccc;
  margin-bottom: 20px;
  margin-top: 20px;
}

.button {
  margin-top: 25px;
  text-align: center;
  margin-bottom: 20px;
}

.button a {
  padding: 15px 20px;
  background: #42b72a;
  border-radius: 6px;
  color: #fff;
  font-size: 1.063rem;
  font-weight: 600;
  transition: 0.2s ease;
}

.button a:hover {
  background: #3ba626;
}

@media (max-width: 900px) {
  .facebook-page {
    flex-direction: column;
    text-align: center;
  }

  .facebook-page .text {
    margin-bottom: 30px;
  }
}

@media (max-width: 460px) {
  .facebook-page h1 {
    font-size: 3.5rem;
  }

  .facebook-page p {
    font-size: 1.3rem;
  }

  form {
    padding: 15px;
  }
}

Conclusion and Final Words

In conclusion, creating a Facebook login page can be a helpful project for those who are new to web development. I hope that by following the steps outlined in this post, you’re able to create a responsive Facebook login page using HTML and CSS.

If you want to further enhance your skills, you can explore other beginner-friendly login form designs available on this website. These forms are great practice opportunities to improve your skills in HTML and CSS.

If you encounter any problems while creating your Facebook login page, you can download the source code files for this Facebook login page project for free by clicking the Download button. You can also view a live demo of it by clicking the View Live button.

How to Implement Form Validation in HTML CSS and JavaScript

CodingNepal — Thu, 25 May 2023 10:08:50 +0000

Forms play a crucial role in web development, allowing users to input and submit their data. However, ensuring the accuracy and integrity of the data is essential. This is where form validation comes into play.

Form validation involves ensuring that the data entered by users in a form meets specific criteria and is valid. Its primary purpose is to prevent the submission of incomplete or invalid data.

This blog post is designed to guide beginner web developers through the process of form validation using HTML, CSS, and JavaScript. You will start from scratch, learning how to create a responsive form using HTML and CSS. Then, we will dive into the world of form validation and explore how to apply it effectively using JavaScript.

Additionally, you’ll also learn how to show or hide password visibility on the toggle button click. To see a live demo of this form validation in action, scroll to the bottom of this page and click on the View Live Demo button.

Steps For Creating Form Validation in HTML

To create a form and do the validation using HTML, CSS, and vanilla JavaScript, follow the given steps line by line:

Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create an thank-you.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Create a script.js file. The file name must be script and its extension .js

To start, add the following HTML codes to your index.html file to create a basic form layout: This form includes full name, email, password, date of birth, and gender fields, but you can add or remove fields as desired.




  
    
    
    Form Validation in HTML | CodingNepal
    
    
    
  
  
    
      Form Validation
      
        Full Name
        
      
      
        Email Address
        
      
      
        Password
        
        
      
      
        Birth Date
        
      
      
        Gender

Next, add the following HTML codes to your thank-you.html file: When the user fills out the form with valid data, they will be redirected to this HTML page. This page includes only a heading that says, “Thank you for filling out the form correctly.”.




    
    
    Thanks page


    Thank you for filling out the form correctly.

Next, add the following CSS codes to your style.css file to style the form and make it responsive and beautiful. You can customize this code to your liking by adjusting the color, font, size, and other CSS properties.

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Open Sans', sans-serif;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  min-height: 100vh;
  background: #1BB295;
}

form {
  padding: 25px;
  background: #fff;
  max-width: 500px;
  width: 100%;
  border-radius: 7px;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.05);
}

form h2 {
  font-size: 27px;
  text-align: center;
  margin: 0px 0 30px;
}

form .form-group {
  margin-bottom: 15px;
  position: relative;
}

form label {
  display: block;
  font-size: 15px;
  margin-bottom: 7px;
}

form input,
form select {
  height: 45px;
  padding: 10px;
  width: 100%;
  font-size: 15px;
  outline: none;
  background: #fff;
  border-radius: 3px;
  border: 1px solid #bfbfbf;
}

form input:focus,
form select:focus {
  border-color: #9a9a9a;
}

form input.error,
form select.error {
  border-color: #f91919;
  background: #f9f0f1;
}

form small {
  font-size: 14px;
  margin-top: 5px;
  display: block;
  color: #f91919;
}

form .password i {
  position: absolute;
  right: 0px;
  height: 45px;
  top: 28px;
  font-size: 13px;
  line-height: 45px;
  width: 45px;
  cursor: pointer;
  color: #939393;
  text-align: center;
}

.submit-btn {
  margin-top: 30px;
}

.submit-btn input {
  color: white;
  border: none;
  height: auto;
  font-size: 16px;
  padding: 13px 0;
  border-radius: 5px;
  cursor: pointer;
  font-weight: 500;
  text-align: center;
  background: #1BB295;
  transition: 0.2s ease;
}

.submit-btn input:hover {
  background: #179b81;
}

Finally, add the following JavaScript code to your script.js file to enable form validation, display appropriate error messages, and implement the toggle functionality for password visibility.

// Selecting form and input elements
const form = document.querySelector("form");
const passwordInput = document.getElementById("password");
const passToggleBtn = document.getElementById("pass-toggle-btn");

// Function to display error messages
const showError = (field, errorText) => {
    field.classList.add("error");
    const errorElement = document.createElement("small");
    errorElement.classList.add("error-text");
    errorElement.innerText = errorText;
    field.closest(".form-group").appendChild(errorElement);
}

// Function to handle form submission
const handleFormData = (e) => {
    e.preventDefault();

    // Retrieving input elements
    const fullnameInput = document.getElementById("fullname");
    const emailInput = document.getElementById("email");
    const dateInput = document.getElementById("date");
    const genderInput = document.getElementById("gender");

    // Getting trimmed values from input fields
    const fullname = fullnameInput.value.trim();
    const email = emailInput.value.trim();
    const password = passwordInput.value.trim();
    const date = dateInput.value;
    const gender = genderInput.value;

    // Regular expression pattern for email validation
    const emailPattern = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/;

    // Clearing previous error messages
    document.querySelectorAll(".form-group .error").forEach(field => field.classList.remove("error"));
    document.querySelectorAll(".error-text").forEach(errorText => errorText.remove());

    // Performing validation checks
    if (fullname === "") {
        showError(fullnameInput, "Enter your full name");
    }
    if (!emailPattern.test(email)) {
        showError(emailInput, "Enter a valid email address");
    }
    if (password === "") {
        showError(passwordInput, "Enter your password");
    }
    if (date === "") {
        showError(dateInput, "Select your date of birth");
    }
    if (gender === "") {
        showError(genderInput, "Select your gender");
    }

    // Checking for any remaining errors before form submission
    const errorInputs = document.querySelectorAll(".form-group .error");
    if (errorInputs.length > 0) return;

    // Submitting the form
    form.submit();
}

// Toggling password visibility
passToggleBtn.addEventListener('click', () => {
    passToggleBtn.className = passwordInput.type === "password" ? "fa-solid fa-eye-slash" : "fa-solid fa-eye";
    passwordInput.type = passwordInput.type === "password" ? "text" : "password";
});

// Handling form submission event
form.addEventListener("submit", handleFormData);

Conclusion and Final Words

In conclusion, we started creating the structure of the form using HTML, defining the necessary input fields and their attributes. Then, we used CSS to apply styles to elements such as form fields, labels, and buttons. And last, we used JavaScript to implement form validation logic to ensure that users input valid data.

By following the instructions in this blog post, you should now have a functional form with validation features. For further enhancement of your web development skills, I encourage you to explore and experiment with the various types of forms and form validations provided on this website.

If you encounter any difficulties while creating your form or your code is not working as expected, you can download the source code files for this form for free by clicking the Download button. You can also view a live demo of it by clicking the View Live button.

Create Responsive Registration Form in HTML & CSS

CodingNepal — Tue, 06 Dec 2022 21:11:21 +0000

If you are looking for the Registration Form with a responsive feature and want to create it using basic HTML and CSS code then this blog can fill your demand.

In this blog, you will learn How to Create a Responsive Registration Form in HTML & CSS. Even if you are a complete beginner and have basic knowledge of HTML and CSS then also you will be able to create this Registration Form.

A Registration Form is a section on the website or an application where the user needs to fill in their details as required. The user detail like name, email, address, and others.

Have a look at the Registration Form preview that you are going to learn in this blog. As you can see I have added important input fields that every Registration must-have. And, also you can see some radio buttons to choose from and a submit button as well.

If you want to watch out for the actual demo of this Registration Form and all the HTML and CSS codes that I have used to create this Responsive Registration Form then please have a look at the video tutorial that I have provided below.

Create Responsive Registration Form in HTML & CSS

As you have seen on the video tutorial of this Registration Form. There were lots of input fields to enter user details like name, number, email, birth date, gender, and others. As also shown you the responsiveness of this Registration Form.

I hope after watching the video tutorial on this Registration Form you are able to create this Registration Form easily. You can also take all the HTML and CSS code of this Registration Form that I have provided below.

Registration Form in HTML & CSS [Source Code]

To create a Registration Form in HTML & CSS, follow the given steps line by line:

Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Create a script.js file. The file name must be script and its extension .js

Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the Registration Form in HTML & CSS by clicking on the given download button.

First, paste the following codes into your index.html file.




  
    
    
    
    
    
    
  
  
    
      Registration Form
      
        
          Full Name
          
        

        
          Email Address
          
        

        
          
            Phone Number
            
          
          
            Birth Date
            
          
        
        
          Gender
          
            
              
              male
            
            
              
              Female
            
            
              
              prefer not to say
            
          
        
        
          Address

Second, paste the following codes into your style.css file.

/* Import Google font - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgb(130, 106, 251);
}
.container {
  position: relative;
  max-width: 700px;
  width: 100%;
  background: #fff;
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}
.container header {
  font-size: 1.5rem;
  color: #333;
  font-weight: 500;
  text-align: center;
}
.container .form {
  margin-top: 30px;
}
.form .input-box {
  width: 100%;
  margin-top: 20px;
}
.input-box label {
  color: #333;
}
.form :where(.input-box input, .select-box) {
  position: relative;
  height: 50px;
  width: 100%;
  outline: none;
  font-size: 1rem;
  color: #707070;
  margin-top: 8px;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 0 15px;
}
.input-box input:focus {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}
.form .column {
  display: flex;
  column-gap: 15px;
}
.form .gender-box {
  margin-top: 20px;
}
.gender-box h3 {
  color: #333;
  font-size: 1rem;
  font-weight: 400;
  margin-bottom: 8px;
}
.form :where(.gender-option, .gender) {
  display: flex;
  align-items: center;
  column-gap: 50px;
  flex-wrap: wrap;
}
.form .gender {
  column-gap: 5px;
}
.gender input {
  accent-color: rgb(130, 106, 251);
}
.form :where(.gender input, .gender label) {
  cursor: pointer;
}
.gender label {
  color: #707070;
}
.address :where(input, .select-box) {
  margin-top: 15px;
}
.select-box select {
  height: 100%;
  width: 100%;
  outline: none;
  border: none;
  color: #707070;
  font-size: 1rem;
}
.form button {
  height: 55px;
  width: 100%;
  color: #fff;
  font-size: 1rem;
  font-weight: 400;
  margin-top: 30px;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  background: rgb(130, 106, 251);
}
.form button:hover {
  background: rgb(88, 56, 250);
}
/*Responsive*/
@media screen and (max-width: 500px) {
  .form .column {
    flex-wrap: wrap;
  }
  .form :where(.gender-option, .gender) {
    row-gap: 15px;
  }
}

If you face any difficulties while creating your Registration Form or your code is not working as expected, you can download the source code files for this Registration Form for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.

View Live Demo

25+ Free Login & Registration Form Templates in HTML & CSS

CodingNepal — Tue, 22 Nov 2022 21:11:21 +0000

Login and registration forms play a vital role in the functionality of any website or application. They enable users to create accounts and gain access to the various features offered by the site. While there are numerous approaches to designing these forms, some designs stand out for their creativity and user engagement.

In case you’re unfamiliar, a login form refers to the section on a website or app where users input their login credentials (username and password) to access protected content. On the other hand, a registration form is an area where users are prompted to provide their personal information and details to create a new account.

In this blog post, I will showcase 25+ creative login and registration form designs created using HTML, CSS, and JavaScript. These forms will inspire you to create your own unique and stylish logins. Each form in the list includes a video tutorial and source codes that you can use for free.

So, without further delay, let’s dive into the list of login and registration form designs.

1. Simple Login Form with Icons in HTML

This is the most simple and perfect Login Form Design that I have created in HTML and CSS. As you can see in the given preview of this login form there is a title, some input fields for email or phone number and password with icons, a forget password and Signup link, and a button.

To boost your skills in HTML and CSS this Login Form could be really helpful for you. For the video tutorial and all the HTML and CSS source code for this Login Form, you can visit the given link.

2. Simple Registration Form in HTML

I would highly recommend you learn to create this Registration Form which I have created in HTML and CSS. As you can see on the Registration Form I have added Input Fields which are for entering the name, email, password, and confirm password. Also, there is a checkbox to check and uncheck to accept terms and conditions and a button.

This Registration Form will definitely help to boost your skills in HTML and CSS. You should try to create this Registration Form. To create this Registration Form, I have used basic HTML and CSS code and I believe you can easily create this Signup Form. For the Video tutorial and source code for this Registration Form, you can visit the given link.

3. Login Form with Floating Label Animation

I have created this Login Form using HTML and CSS. In this Login Form, I have added some extra features like the input field’s label-up animation while you focus on it, remember me checkbox, and of course the UI design.

This Login From is also created using basic HTML and CSS code so should definitely try to learn to create this beautiful Login Form. While creating this Login you will learn to give gradient colors on the Login Form and animation also. The video tutorial link and the source code link for this Login From are given below.

4. Responsive Registration Form in HTML

As you can see on this Registration Form I have added many input fields to input different details like name, email, username, password, and many more. I have also added a radio button to choose gender and a button.

If you want to create a perfect Responsive Registration Form in HTML and CSS then it could be best for you. By creating this Registration Form, you will learn to use CSS flexbox, create your own radio buttons, and make Registration Responsive. The video tutorial and Source code links for this Responsive Registration Form are given below.

5. Login Form with Social Media Login Option

As you can see in the image of the Login Form. There are two types of login option user can get, one is they can log in by using email and password and with Twitter or Facebook. We can easily find this type of login option in the modern Login Form.

If you want to create a modern Login Form Design with Twitter and Facebook Login options in HTML and CSS, then this project could be suitable for you. For the video tutorial and source code for this Login Form, you can visit the given link.

6. Responsive Login and Registration Form

This is the most important Form Design that every web designer and application designer should learn. This is mostly used on every website and application. I have created this Login and Registration switchable Login and Registration Form in HTML and CSS.

This type of combined form is used, for example, if the user already has login details then they can use that login form, and if the user is now then they can click on the SignUp link and get registered. The source code and video code link for this Login & Registration Form links are provided below.

7. Responsive Flip Effect Login and Registration Form

This Login and Registration Form is created in HTML and CSS. The main feature of this Login and Sign Up form is its flippable feature. Let me be clear, the left image you can see on this Login and Registration Form is the flip on the right side and left side.

If you click on the SignUp now link, then the image field left side and the Registration Form appear obviously Login Form section gets disappears. Similarly, on the Registration Form also. If you are looking for the video tutorial and source code for this Login and Registration Form then links are given below.

8. Responsive Multi Pages Registration Form in HTML

This is the multipage form that you will learn to create. To create this Multi-pages Registration Form is created from HTML CSS and JavaScipt. As you can see on the image of this Registration Form there are lots of input fields with a button at the bottom. To go to the next page you have to fill in all the input fields.

After you fill in all the details in the required input fields and click on the next button another Registration Page appears and a submit and the back button also. Visit the following links for the video tutorial and HTML CSS and JavaScript code for this Multi-pages Registration Form.

9 . Multi-Step Registration Form with Progress Bar

This is the advanced version of the Registration Form with having best user interface and experience. The world’s number one company Google has also this type of multi-step registration feature which we can see while creating our google account.

In this Registration Form, you have to fill in only two input fields at a time and click on the next button for further. You can easily create this Multi-Step Registration using some HTML CSS and JavaScript code. For the video tutorial and Source code for this Registration Form, you may visit the given links

10. Login & Registration Form in HTML CSS

This is the best Login and Signup Form I have ever created in HTML CSS and JavaScript. As you can see on this Login and Registration Form, it has all the features that a Login and Signup Form should have such as login and signup option through social media like Facebook and Google, password show and hides feature, and many more.

You must try to create this Login and Signup Form in HTML CSS and JavaScript. This Login and Registration Form will help you to boost your skills in UI/Ux design and of course in HTML CSS and JavaScript. You can get video tutorials and source code links for this Login and Signup Form below.

11. Popup Login Form in HTML and CSS

This is the most unique Login Form Design on the list. The feature that makes this Login Form different is its popup animation. Basically, at first, you will have a button, when you click on the button this Login Form will appear. To close the Login Form you have to click on the close icon which is situated in the top right corner.

To create this Login Form I have used HTML and CSS. So even if you are a beginner at HTML and CSS then also you can create this Popup Login Form. Links for the Video tutorial and source code to this Popup Login Form, you can without below.

12. Login Form with Glowing Border Animation

This Login From could be best for gaming websites because of its gaming vibes color combination and animation. While you focus on the input field or start typing each input field’s border starts glowing smoothly.

If you are looking for an animated Login Form with simple HTML and CSS code then this Login Form could fulfill your desire. To get the video tutorial and source code file for this animated Login Form, you can visit the given links

13. Neumorphism Login Form in HTML CSS

This Login Form is Fully Based on neumorphism UI. As you can see in the given image all the section form has different and interesting color and shadows. If you are looking for a Login Form with a neumorphims user interface then you should try this Login Form.

This Login From is created in HTML and CSS without any bootstrap code because I prefer to create designs in Pure CSS. If you have liked this neumorphism Login Form then the video tutorial and source code links are available below.

14. Glassmorphism Login Form in HTML CSS

If you are looking for glassmorphism Login Form then here it is. This is the simple Login Form with the glass user interface which you have seen in the image. To create this Login Form I have used HTML CSS & JavaScript. It also has a password show and hides feature.

This is the beginner-friendly Login Form that can help to boost your skills in HTML CSS & JavaScript. Also, from this form, you will learn to create a glass effect. The video tutorial and source code link for this glassmorphism Login Form is given below.

15. Login Form Validation with Shake Effect

This is the best Login Form in the list with having feature of Email Address and Password Validation. If you enter an invalid email or password then those input fields shake with the red error message.

I would highly recommend you try to create this Login Form if you are learning HTML CSS and JavaScript. You can easily create this Login From with your basic HTML CSS & JavaScript knowledge.

For the source code and video tutorial link for this Login Form with Validation Feature, check below.

16. Form with Email & Password Validation in JS

This is the best Registration form in the list that I have created in HTML CSS and JavaScript. The unique feature of this Registration From is that it can validate your email, and password and also confirm whether that created passwords are matched or not. It has also a password show and hides feature.

If you want to create a Registration Form in HTML CSS and JavaScript and have basic on it then also this Registration Form could be best for you. Do visit the given links for the video tutorial and source code of this Registration Form.

17. School Registration Form in HTML and CSS

This registration form was created using HTML and CSS and consists of a single page. The form includes multiple fields such as name, address, email, phone number, gender, date of birth, and various others, which are displayed as input boxes.

If you are new to front-end development and wish to build a school registration form using HTML and CSS, this registration form template would be highly suitable for you. You can access the source code and live demo of this form by clicking the provided buttons.

18. Animated Login Registration Form in HTML CSS

This is a login and registration form template created using HTML, CSS, and JavaScript. The initial page that appears is a login form containing input fields. Clicking the signup button grants users access to the registration page.

If you are seeking a login and registration form with a modern UI and UX design, this form template might fulfill your requirements. By clicking the provided buttons, you can access the source code and live demo of this form.

19. Login Form with Facebook and Twitter Buttons

This login form design is considered one of the best, as it provides the convenience of Facebook and Twitter login options for users. The form is created using HTML and CSS, ensuring a visually appealing design.

If you require a login form that includes options like Facebook or Twitter login, this form template could be suitable for your needs. By clicking the provided buttons, you can access the source code and live demo of this form.

20. Website with Login Registration Form in HTML CSS

This template offers a website that features both a login and registration form. The website includes a navigation bar with various navigation links. To display the login form, there is a dedicated button, and to access the registration form, users need to click on the signup button within the login form. The entire design has been created using HTML and CSS.

If you are looking for a website that includes a login and registration form, this template is designed to meet your requirements. By clicking the provided buttons, you can access the source code and live demo of this form.

21. Login and Signup Form with Sliding Animation

This login and signup form is made using HTML, CSS, and JavaScript. The login form has email and password input fields, whereas the signup form has three input fields: email, password, and confirm password. Users can access the signup form by clicking on the signup tab. There is a sliding animation when switching from login to signup or signup to login.

If you are searching for a login and signup form with sliding animation, this form template created using HTML, CSS, and JavaScript, might fulfill your requirements. By clicking the provided buttons, you can access the source code and live demo of this form.

22. Gradient Background Login Form HTML and CSS

This attractive gradient login form is designed using HTML and CSS. Its main feature is the inclusion of Facebook and Google login buttons, which provide multiple login options for the user. The gradient background makes the login form more visually appealing.

If you are in search of a visually appealing login form that offers Facebook and Google login options, then this login form template is exactly what you need. By simply clicking the provided buttons, you can conveniently access the source code and live demo of this form.

23. Login Form with Icons in HTML and CSS

This login form template built using HTML and CSS is considered one of the simple but useful form design. Its unique feature of a toggle option for showing and hiding information adds to its appeal and interest.

If you are looking for a login form template that includes a feature to show and hide passwords, then this particular template could fulfill your requirements. By clicking the provided buttons, you can easily access the source code and live demo of this form.

24. Simple Login Form with Floating Label Animation

This login form is built using HTML and CSS. Additionally, it features an input label animation that moves up when the input field is in focus. In short, you can say this form has floating label animation.

If you are in search of a login form template with floating label animation then this form can meet your requirements. By clicking the buttons provided, you can easily access the source code and live demo of this form.

25. Login Form Validation in HTML CSS & JavaScript

This simple login form is created using HTML, CSS, and JavaScript, and its key feature is the validation of the email and password entered by the user. If the user’s entered email or password does not match the validation criteria, then a custom error message will be shown.

If you are looking for a simple login form that validates the email and password entered by the user, then this login form could be the right match for your needs. By clicking the provided buttons, you can conveniently access the source code and live demo of this form.

26. Signup Form with Validation Feature in HTML

This form uses HTML, CSS, and JavaScript to provide seamless validation and password visibility toggle functionalities. When users attempt to submit the form with invalid or incomplete data, informative error messages appear below the respective fields, guiding them toward accurate inputs.

Whether you’re a newbie web developer seeking to learn or in need of a reliable signup form for various purposes, this form is an ideal choice. Its user-friendly design and validation features make it a valuable asset for your projects.

Watch Video Tutorial
Download Source Code

Conclusion and Final Words

I hope you enjoyed this blog post showcasing 25+ creative login and registration forms. If you are looking for more inspiration, be sure to check out this website for a variety of other form templates.

If you’re just starting your journey in web development, I recommend checking out our post on the Top 12 Beginner-Friendly Website Templates in HTML, CSS, and JavaScript. These designs are tailored to newcomers, helping you improve your skills while creating stunning websites.

Feel free to share this blog with fellow enthusiasts. Thank you for visiting!

Responsive Registration Form in HTML CSS & JavaScript | With Source Code

CodingNepal — Tue, 19 Apr 2022 21:11:19 +0000

Hello friend, I hope you are doing great, today in this blog you will learn to create a Responsive Registration Form in HTML CSS & JavaScript With Multi-Pages. There are lots of Forms already I have created like login form, registration or sign up form, login and registration form and contact us form.

Registration Forms are the combination of various input fields, where users need to fill in their details to register on the webpage or application to get excess.

Let’s have a quick look at the given image of our project [Registration Form], on the webpage. You can see there are two forms, actually, in our real project there will appear only one form and when you filled all your details and click on the Next button the first form will disappear and the second form will appear.

Now, you can watch the real demo of our Responsive Registration Form with all the HTML CSS, and JavaScript code that I have used to create this sign-up form.

Registration Form in HTML CSS & JavaScript

I have provided all the HTML CSS and JavaScript code that I have used to create this Registration form Signup Form. Before getting into the source code, I would like to explain some basic things about the given video tutorial on the registration form.

As you have seen in the given video tutorial of our project [Responsive Registration Form ]. At first, we have seen only one registration form with different inputs filed with one button. Also when I focused on the input field little shadow appear, which makes a better user experience (UX). When I clicked on the Next button without filling the input field, we could not get into their page.

After filling all the input fields then, we moved to another page. On the other page, we have to fill in different details and that input field had two buttons. All the user interface (UI) is created by using HTML and CSS to move the page I have used some JavaScript code.

I believe now you can build this Responsive Registration Form by using HTML CSS and JavaScript, if you are feeling difficulty, I have provided all the HTML CSS and JavaScript code below, that I have used to create this registration form or signup form.

Registration Form [Source Code]

To get the following HTML CSS and JavaScript code for the Responsive Registration Form you need to create three files one is an HTML file and another is a CSS file and a JavaScript file. After creating these three files then you can copy-paste the given codes on your document. You can also download all source code files from the given download button.





    
    
    
    
    
    
     
    
    

   Responsive Regisration Form 


    
        Registration

        
            
                
                    Personal Details

                    
                        
                            Full Name
                            
                        

                        
                            Date of Birth
                            
                        

                        
                            Email
                            
                        

                        
                            Mobile Number
                            
                        

                        
                            Gender
                            
                        

                        
                            Occupation
                            
                        
                    
                

                
                    Identity Details

                    
                        
                            ID Type
                            
                        

                        
                            ID Number
                            
                        

                        
                            Issued Authority
                            
                        

                        
                            Issued State
                            
                        

                        
                            Issued Date
                            
                        

                        
                            Expiry Date
                            
                        
                    

                    
                 
            

            
                
                    Address Details

                    
                        
                            Address Type
                            
                        

                        
                            Nationality
                            
                        

                        
                            State
                            
                        

                        
                            District
                            
                        

                        
                            Block Number
                            
                        

                        
                            Ward Number
                            
                        
                    
                

                
                    Family Details

                    
                        
                            Father Name
                            
                        

                        
                            Mother Name
                            
                        

                        
                            Grandfather
                            
                        

                        
                            Spouse Name
                            
                        

                        
                            Father in Law
                            
                        

                        
                            Mother in Law
                            
                        
                    

                    
                        
                            
                            Back

/* ===== Google Font Import - Poppins ===== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
body{
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #4070f4;
}
.container{
    position: relative;
    max-width: 900px;
    width: 100%;
    border-radius: 6px;
    padding: 30px;
    margin: 0 15px;
    background-color: #fff;
    box-shadow: 0 5px 10px rgba(0,0,0,0.1);
}
.container header{
    position: relative;
    font-size: 20px;
    font-weight: 600;
    color: #333;
}
.container header::before{
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    height: 3px;
    width: 27px;
    border-radius: 8px;
    background-color: #4070f4;
}
.container form{
    position: relative;
    margin-top: 16px;
    min-height: 490px;
    background-color: #fff;
    overflow: hidden;
}
.container form .form{
    position: absolute;
    background-color: #fff;
    transition: 0.3s ease;
}
.container form .form.second{
    opacity: 0;
    pointer-events: none;
    transform: translateX(100%);
}
form.secActive .form.second{
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
}
form.secActive .form.first{
    opacity: 0;
    pointer-events: none;
    transform: translateX(-100%);
}
.container form .title{
    display: block;
    margin-bottom: 8px;
    font-size: 16px;
    font-weight: 500;
    margin: 6px 0;
    color: #333;
}
.container form .fields{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}
form .fields .input-field{
    display: flex;
    width: calc(100% / 3 - 15px);
    flex-direction: column;
    margin: 4px 0;
}
.input-field label{
    font-size: 12px;
    font-weight: 500;
    color: #2e2e2e;
}
.input-field input, select{
    outline: none;
    font-size: 14px;
    font-weight: 400;
    color: #333;
    border-radius: 5px;
    border: 1px solid #aaa;
    padding: 0 15px;
    height: 42px;
    margin: 8px 0;
}
.input-field input :focus,
.input-field select:focus{
    box-shadow: 0 3px 6px rgba(0,0,0,0.13);
}
.input-field select,
.input-field input[type="date"]{
    color: #707070;
}
.input-field input[type="date"]:valid{
    color: #333;
}
.container form button, .backBtn{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 45px;
    max-width: 200px;
    width: 100%;
    border: none;
    outline: none;
    color: #fff;
    border-radius: 5px;
    margin: 25px 0;
    background-color: #4070f4;
    transition: all 0.3s linear;
    cursor: pointer;
}
.container form .btnText{
    font-size: 14px;
    font-weight: 400;
}
form button:hover{
    background-color: #265df2;
}
form button i,
form .backBtn i{
    margin: 0 6px;
}
form .backBtn i{
    transform: rotate(180deg);
}
form .buttons{
    display: flex;
    align-items: center;
}
form .buttons button , .backBtn{
    margin-right: 14px;
}

@media (max-width: 750px) {
    .container form{
        overflow-y: scroll;
    }
    .container form::-webkit-scrollbar{
       display: none;
    }
    form .fields .input-field{
        width: calc(100% / 2 - 15px);
    }
}

@media (max-width: 550px) {
    form .fields .input-field{
        width: 100%;
    }
}

const form = document.querySelector("form"),
        nextBtn = form.querySelector(".nextBtn"),
        backBtn = form.querySelector(".backBtn"),
        allInput = form.querySelectorAll(".first input");


nextBtn.addEventListener("click", ()=> {
    allInput.forEach(input => {
        if(input.value != ""){
            form.classList.add('secActive');
        }else{
            form.classList.remove('secActive');
        }
    })
})

backBtn.addEventListener("click", () => form.classList.remove('secActive'));

If you face any difficulties while creating your Responsive Registration Form or your code is not working as expected, you can download the source code files for this Registration Form for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.

Login and Registration Form in HTML CSS and JavaScript

CodingNepal — Sun, 13 Feb 2022 21:11:19 +0000

Hello friend I hope you are doing awesome. Today here we will learn to create a Responsive Login and Registration Form in HTML CSS and JavaScript. You can also check out the 16 Free Login & Registration Forms that I have created to date. But this project has several facilities and features.

The login form is the section on the webpage where users need to fill required details to enter the particular website or webpage. Same as the Registration form is the section with a combination of input fields where users need to fill in details to create a login id and password.

Let’s have a quick look at the given image of our project [Login and Registration Form]. On the left side, we can see a login form with some input fields, buttons,s, and text with links, similarly, on the right side, we can see a registration form. Actually, at first, there will be one form which is the login form and when we click on the signup now button the login form will disappear and the registration form will appear.

Now we are going to watch the real demo of this project [Login and Registration Form], and all the animation that I have included in this template. Also by watching the video tutorial, we will get an idea, of how all HTML CSS and JavaScript code works properly behind this beautiful form design.

Login & Registration Form in HTML CSS JavaScript

I have provided all the HTML CSS and JavaScript code that I have used to create this beautiful Login and Registration Form, before Jumping into the source code file, you need to know some important points outs of this video tutorial.

As you have seen on the video tutorial of this Login and Registration Form. We saw only on the login form on the screen with the login title some input filed with beautiful focus animation and a button and some text and nav links and also we have seen password hide and show eye toggle button. When I clicked on the signup now link sign-up button disappear and the registration form appeared with a beautiful sliding animation.

Similarly, on the registration form, we have seen a title, an input field, a button, and some text with nav links. Again when I clicked on the Login now link, the registration form disappear and the login form appear.

For the UI design I have used only HTM and CSS and to toggle the Login and Registration Form and Password Show Hide feature I have used Some JavaScript code. If you want this type of Login and Registration Form in HTM and CSS Only then you can click the link.

I believe, now you can easily create this login form, if you are feeling difficulty, I have provided all the HTML CSS, and JavaScript code that I have used to create this Login and Registration Form below:

Login and Registration Form [Source Code]

To take the source code of this Login and Registration Form Template first, you need to create two files: an HTML file and a CSS file. After creating these two files then you can copy-paste the following source code. You can also directly download all source codes of this Login and Registration Form by clicking on the given download button.





    
    
    
    
    
    

    
    
         
    Login & Registration Form 


    
    
        
            
                Login

                
                    
                        
                        
                    
                    
                        
                        
                        
                    

                    
                        
                            
                            Remember me
                        
                        
                        Forgot password?
                    

                    
                        
                    
                

                
                    Not a member?
                        Signup Now
                    
                
            

            
            
                Registration

                
                    
                        
                        
                    
                    
                        
                        
                    
                    
                        
                        
                    
                    
                        
                        
                        
                    

                    
                        
                            
                            I accepted all terms and conditions
                        
                    

                    
                        
                    
                

                
                    Already a member?
                        Login Now

/* ===== Google Font Import - Poformsins ===== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body{
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #4070f4;
}

.container{
    position: relative;
    max-width: 430px;
    width: 100%;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    margin: 0 20px;
}

.container .forms{
    display: flex;
    align-items: center;
    height: 440px;
    width: 200%;
    transition: height 0.2s ease;
}


.container .form{
    width: 50%;
    padding: 30px;
    background-color: #fff;
    transition: margin-left 0.18s ease;
}

.container.active .login{
    margin-left: -50%;
    opacity: 0;
    transition: margin-left 0.18s ease, opacity 0.15s ease;
}

.container .signup{
    opacity: 0;
    transition: opacity 0.09s ease;
}
.container.active .signup{
    opacity: 1;
    transition: opacity 0.2s ease;
}

.container.active .forms{
    height: 600px;
}
.container .form .title{
    position: relative;
    font-size: 27px;
    font-weight: 600;
}

.form .title::before{
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 30px;
    background-color: #4070f4;
    border-radius: 25px;
}

.form .input-field{
    position: relative;
    height: 50px;
    width: 100%;
    margin-top: 30px;
}

.input-field input{
    position: absolute;
    height: 100%;
    width: 100%;
    padding: 0 35px;
    border: none;
    outline: none;
    font-size: 16px;
    border-bottom: 2px solid #ccc;
    border-top: 2px solid transparent;
    transition: all 0.2s ease;
}

.input-field input:is(:focus, :valid){
    border-bottom-color: #4070f4;
}

.input-field i{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    font-size: 23px;
    transition: all 0.2s ease;
}

.input-field input:is(:focus, :valid) ~ i{
    color: #4070f4;
}

.input-field i.icon{
    left: 0;
}
.input-field i.showHidePw{
    right: 0;
    cursor: pointer;
    padding: 10px;
}

.form .checkbox-text{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
}

.checkbox-text .checkbox-content{
    display: flex;
    align-items: center;
}

.checkbox-content input{
    margin-right: 10px;
    accent-color: #4070f4;
}

.form .text{
    color: #333;
    font-size: 14px;
}

.form a.text{
    color: #4070f4;
    text-decoration: none;
}
.form a:hover{
    text-decoration: underline;
}

.form .button{
    margin-top: 35px;
}

.form .button input{
    border: none;
    color: #fff;
    font-size: 17px;
    font-weight: 500;
    letter-spacing: 1px;
    border-radius: 6px;
    background-color: #4070f4;
    cursor: pointer;
    transition: all 0.3s ease;
}

.button input:hover{
    background-color: #265df2;
}

.form .login-signup{
    margin-top: 30px;
    text-align: center;
}

const container = document.querySelector(".container"),
      pwShowHide = document.querySelectorAll(".showHidePw"),
      pwFields = document.querySelectorAll(".password"),
      signUp = document.querySelector(".signup-link"),
      login = document.querySelector(".login-link");

    //   js code to show/hide password and change icon
    pwShowHide.forEach(eyeIcon =>{
        eyeIcon.addEventListener("click", ()=>{
            pwFields.forEach(pwField =>{
                if(pwField.type ==="password"){
                    pwField.type = "text";

                    pwShowHide.forEach(icon =>{
                        icon.classList.replace("uil-eye-slash", "uil-eye");
                    })
                }else{
                    pwField.type = "password";

                    pwShowHide.forEach(icon =>{
                        icon.classList.replace("uil-eye", "uil-eye-slash");
                    })
                }
            }) 
        })
    })

    // js code to appear signup and login form
    signUp.addEventListener("click", ( )=>{
        container.classList.add("active");
    });
    login.addEventListener("click", ( )=>{
        container.classList.remove("active");
    });

If you face any difficulties while creating your Login and Registration Form or your code is not working as expected, you can download the source code files for this Login and Registration Page for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.

Responsive Login and Registration Form in HTML and CSS

CodingNepal — Fri, 25 Jun 2021 21:11:18 +0000

Hello friends, today we are going to learn How to Create a Responsive Login and Registration Form Template in HTML and CSS. There are a lot of Forms Design that I have created before but, to date, I have not created login and registration forms together or on one page.

What is the Login and Registration Form

Login Form means the login page or section where users need to enter their login details like email, phone number, and password. Registration form is the process to register user details to make login details for entry in the particular page or website.

In the login form section, we can make two input fields one is for the user email address or phone number and another for password and this is mandatory and in the registration form we have to add some extra input fields like the input field of name, phone number, password and other.

Let’s have a look at the image of the Login and Registration Form Template. There you can see only Login Form but when you click on the Signup now the right side image smoothly flips into the left side then the Signup form appears and Login Form Hides.

I have made this Responsive Login and Registration Form in HTML and CSS only and I have not used any single code of javascript for building this Login and Registration Form. I promise that you can easily understand all the HTML CSS code that I have used to make this Form.

To see the real example of this Login and Registration, please do watch the video tutorial of this design. After watching the tutorial you will definitely understand that how HTML and CSS code is working to make this Login and Registration Page Perfectly.

Login and Registration Form in HTML and CSS | Video Tutorial

You will get this Login and Registration Form Template Free, I have provided all HTML and CSS source code of this template below. Before jumping into the source code, you nee to know some important points of this project.

As you have seen on the video tutorial of Responsive Login and Registration Form in HTML CSS. At first, we could see only the Login Form and Registration Form had hidden behind the image. When I clicked on the Signup link, that image smoothly flip to the left direction, and the Registration Form appears and the Login Form disappears.

I have used HTML input’s checkbox to make the Signup and Login link clickable, you can do this by using JavaScript code but for this simple thing, I had gone for HTML’s Checkbox. To make this Login and Registration Form responsive I have used a CSS media query.

Now I believe, you can build and this Login and Registration Form easily but if you are feeling difficulty creating this Form, I have provided all source code of this Login and Registration Form below, from there you can copy or download it all source code files.

Login & Registration Form Template | Source Code

For taking the source code of this Login and Registration Form Template first, you need to create two files one is an HTML file and another is a CSS file. After creating these two files then you can copy-paste the following source code. You can also directly download all source codes of this Login and Registration Form by clicking on the given download button.




  
    
     Login and Registration Form in HTML & CSS | CodingLab 
    
    
    
    
   

  
    
    
      
        
        
          Every new friend is a 
 new adventure
          Let's get connected
        
      
      
        
        
          Complete miles of journey 
 with one step
          Let's get started
        
      
    
    
        
          
            Login
          
            
              
                
                
              
              
                
                
              
              Forgot password?
              
                
              
              Don't have an account? Sigup now
            
        
      
        
          Signup
        
            
              
                
                
              
              
                
                
              
              
                
                
              
              
                
              
              Already have an account? Login now

/* Google Font Link */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins" , sans-serif;
}
body{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #7d2ae8;
  padding: 30px;
}
.container{
  position: relative;
  max-width: 850px;
  width: 100%;
  background: #fff;
  padding: 40px 30px;
  box-shadow: 0 5px 10px rgba(0,0,0,0.2);
  perspective: 2700px;
}
.container .cover{
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  width: 50%;
  z-index: 98;
  transition: all 1s ease;
  transform-origin: left;
  transform-style: preserve-3d;
}
.container #flip:checked ~ .cover{
  transform: rotateY(-180deg);
}
 .container .cover .front,
 .container .cover .back{
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.cover .back{
  transform: rotateY(180deg);
  backface-visibility: hidden;
}
.container .cover::before,
.container .cover::after{
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  background: #7d2ae8;
  opacity: 0.5;
  z-index: 12;
}
.container .cover::after{
  opacity: 0.3;
  transform: rotateY(180deg);
  backface-visibility: hidden;
}
.container .cover img{
  position: absolute;
  height: 100%;
  width: 100%;
  object-fit: cover;
  z-index: 10;
}
.container .cover .text{
  position: absolute;
  z-index: 130;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.cover .text .text-1,
.cover .text .text-2{
  font-size: 26px;
  font-weight: 600;
  color: #fff;
  text-align: center;
}
.cover .text .text-2{
  font-size: 15px;
  font-weight: 500;
}
.container .forms{
  height: 100%;
  width: 100%;
  background: #fff;
}
.container .form-content{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.form-content .login-form,
.form-content .signup-form{
  width: calc(100% / 2 - 25px);
}
.forms .form-content .title{
  position: relative;
  font-size: 24px;
  font-weight: 500;
  color: #333;
}
.forms .form-content .title:before{
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 25px;
  background: #7d2ae8;
}
.forms .signup-form  .title:before{
  width: 20px;
}
.forms .form-content .input-boxes{
  margin-top: 30px;
}
.forms .form-content .input-box{
  display: flex;
  align-items: center;
  height: 50px;
  width: 100%;
  margin: 10px 0;
  position: relative;
}
.form-content .input-box input{
  height: 100%;
  width: 100%;
  outline: none;
  border: none;
  padding: 0 30px;
  font-size: 16px;
  font-weight: 500;
  border-bottom: 2px solid rgba(0,0,0,0.2);
  transition: all 0.3s ease;
}
.form-content .input-box input:focus,
.form-content .input-box input:valid{
  border-color: #7d2ae8;
}
.form-content .input-box i{
  position: absolute;
  color: #7d2ae8;
  font-size: 17px;
}
.forms .form-content .text{
  font-size: 14px;
  font-weight: 500;
  color: #333;
}
.forms .form-content .text a{
  text-decoration: none;
}
.forms .form-content .text a:hover{
  text-decoration: underline;
}
.forms .form-content .button{
  color: #fff;
  margin-top: 40px;
}
.forms .form-content .button input{
  color: #fff;
  background: #7d2ae8;
  border-radius: 6px;
  padding: 0;
  cursor: pointer;
  transition: all 0.4s ease;
}
.forms .form-content .button input:hover{
  background: #5b13b9;
}
.forms .form-content label{
  color: #5b13b9;
  cursor: pointer;
}
.forms .form-content label:hover{
  text-decoration: underline;
}
.forms .form-content .login-text,
.forms .form-content .sign-up-text{
  text-align: center;
  margin-top: 25px;
}
.container #flip{
  display: none;
}
@media (max-width: 730px) {
  .container .cover{
    display: none;
  }
  .form-content .login-form,
  .form-content .signup-form{
    width: 100%;
  }
  .form-content .signup-form{
    display: none;
  }
  .container #flip:checked ~ .forms .signup-form{
    display: block;
  }
  .container #flip:checked ~ .forms .login-form{
    display: none;
  }
}

If you face any difficulties while creating your Responsive Login and Registration Form or your code is not working as expected, you can download the source code files for this Login and Signup Form for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.

Responsive Registration Form in HTML and CSS

CodingNepal — Thu, 07 Jan 2021 21:09:29 +0000

Hello Reader, today in this blog you will learn to create a Responsive Registration Form in HTML and CSS, you can also call it the Signup form. You can also check out the 16 Login & Registration Forms I have created to date. Now I’m going to build a registration/signup form.

The registration/signup form contains various input fields of different input details where the user needs to fill in his/her details to submit for a particular web page. There are various types of registration but the main purpose of this type of form is to collect users’ information or details.

As you can see on the given image of the signup of the registration form. Normally you can add 6 to 10 input fields on the signup form. Many people are confused about what they should include in the signup or registration form. You can add the following elements to your signup or registration form.

Company Logo
First and last name
User name or Email
Phone number
Country/ Region/ State
Date and Time
Gender Selection
Signup Button

If you want to see all the animation and the responsive programming, then you have to watch full video tutorials of this program Responsive Registration Form in HTML and CSS, after watching this video you will get all codes behind this programming and you will learn the actual works of every code.

Registration Form in HTML and CSS | Video Tutorial

You can get this Signup or Registration Form Template free, I have provided all the HTML and CSS code that I have used to create this template. You can take all the source code from below. Before jumping into the source code file you need to know some importance of this project.

As you have seen in the full video tutorial of the responsive registration form in HTML and CSS. I have added important elements which are essential for the registration form. You have also seen HTML and CSS code for this type of registration form.

To make this registration form responsive I have used a CSS media query. Also, you have seen how to make a custom radio button and input field of input box animation.

If you are familiar with HTML and CSS, you can easily make this Responsive Registration Form. If you have basic knowledge of JavaScript then you can add more functions to this registration form.

Those friends who are feeling difficulties building this registration form or page, don’t worry I have provided free HTML and CSS source code files of this Responsive Registration Form below:

Registration Form | Sign-up form | Source Code

To copy-paste the given codes of this Registration/Signup Form Design Template, you need to create two files one HTML file and another one a CSS file, after creating ing these two files you simply copy-paste all the given codes of HTML & CSS. You can also download all source code files from the given download button.

Create an HTML file on your computer with the name index.html and copy-paste the given HTML code of the Registration Form into your document.




  
    
     Responsive Registration Form | CodingLab 
    
     
   

  
    Registration
    
      
        
          
            Full Name
            
          
          
            Username
            
          
          
            Email
            
          
          
            Phone Number
            
          
          
            Password
            
          
          
            Confirm Password
            
          
        
        
          
          
          
          Gender
          
            
            
            Male
          
          
            
            Female
          
          
            
            Prefer not to say

Create a CSS file on your computer with the name style.css and copy-paste the following CSS code of this Registration Form into your document. Remember that the HTML file and CSS file must be in the same folder.

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins',sans-serif;
}
body{
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  background: linear-gradient(135deg, #71b7e6, #9b59b6);
}
.container{
  max-width: 700px;
  width: 100%;
  background-color: #fff;
  padding: 25px 30px;
  border-radius: 5px;
  box-shadow: 0 5px 10px rgba(0,0,0,0.15);
}
.container .title{
  font-size: 25px;
  font-weight: 500;
  position: relative;
}
.container .title::before{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 30px;
  border-radius: 5px;
  background: linear-gradient(135deg, #71b7e6, #9b59b6);
}
.content form .user-details{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 20px 0 12px 0;
}
form .user-details .input-box{
  margin-bottom: 15px;
  width: calc(100% / 2 - 20px);
}
form .input-box span.details{
  display: block;
  font-weight: 500;
  margin-bottom: 5px;
}
.user-details .input-box input{
  height: 45px;
  width: 100%;
  outline: none;
  font-size: 16px;
  border-radius: 5px;
  padding-left: 15px;
  border: 1px solid #ccc;
  border-bottom-width: 2px;
  transition: all 0.3s ease;
}
.user-details .input-box input:focus,
.user-details .input-box input:valid{
  border-color: #9b59b6;
}
 form .gender-details .gender-title{
  font-size: 20px;
  font-weight: 500;
 }
 form .category{
   display: flex;
   width: 80%;
   margin: 14px 0 ;
   justify-content: space-between;
 }
 form .category label{
   display: flex;
   align-items: center;
   cursor: pointer;
 }
 form .category label .dot{
  height: 18px;
  width: 18px;
  border-radius: 50%;
  margin-right: 10px;
  background: #d9d9d9;
  border: 5px solid transparent;
  transition: all 0.3s ease;
}
 #dot-1:checked ~ .category label .one,
 #dot-2:checked ~ .category label .two,
 #dot-3:checked ~ .category label .three{
   background: #9b59b6;
   border-color: #d9d9d9;
 }
 form input[type="radio"]{
   display: none;
 }
 form .button{
   height: 45px;
   margin: 35px 0
 }
 form .button input{
   height: 100%;
   width: 100%;
   border-radius: 5px;
   border: none;
   color: #fff;
   font-size: 18px;
   font-weight: 500;
   letter-spacing: 1px;
   cursor: pointer;
   transition: all 0.3s ease;
   background: linear-gradient(135deg, #71b7e6, #9b59b6);
 }
 form .button input:hover{
  /* transform: scale(0.99); */
  background: linear-gradient(-135deg, #71b7e6, #9b59b6);
  }
 @media(max-width: 584px){
 .container{
  max-width: 100%;
}
form .user-details .input-box{
    margin-bottom: 15px;
    width: 100%;
  }
  form .category{
    width: 100%;
  }
  .content form .user-details{
    max-height: 300px;
    overflow-y: scroll;
  }
  .user-details::-webkit-scrollbar{
    width: 5px;
  }
  }
  @media(max-width: 459px){
  .container .content .category{
    flex-direction: column;
  }
}

If you face any difficulties while creating your Responsive Registration Form or your code is not working as expected, you can download the source code files for this Signup Form for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.

css form – CodingNepal

Create Website with Login & Registration Form in HTML CSS and JavaScript

Video Tutorial of Website with Login & Registration Form

Steps to Create Website with Login & Registration Form

Welcome Back

LOGIN

Create Account

SIGNUP

Conclusion and Final words

How to Create Netflix Login Page in HTML and CSS

Steps To Create Netflix Login Page in HTML and CSS

Sign In

Conclusion and Final Words

How to Create Facebook Login Page in HTML and CSS

Steps To Create Facebook Login Page HTML & CSS

facebook

Conclusion and Final Words

How to Implement Form Validation in HTML CSS and JavaScript

Steps For Creating Form Validation in HTML

Form Validation

Thank you for filling out the form correctly.

Conclusion and Final Words

Create Responsive Registration Form in HTML & CSS

Create Responsive Registration Form in HTML & CSS

You May Like This:

Registration Form in HTML & CSS [Source Code]

Gender

25+ Free Login & Registration Form Templates in HTML & CSS

1. Simple Login Form with Icons in HTML

2. Simple Registration Form in HTML

3. Login Form with Floating Label Animation

4. Responsive Registration Form in HTML

5. Login Form with Social Media Login Option

6. Responsive Login and Registration Form

7. Responsive Flip Effect Login and Registration Form

8. Responsive Multi Pages Registration Form in HTML

9 . Multi-Step Registration Form with Progress Bar

10. Login & Registration Form in HTML CSS

11. Popup Login Form in HTML and CSS

12. Login Form with Glowing Border Animation

13. Neumorphism Login Form in HTML CSS

14. Glassmorphism Login Form in HTML CSS

15. Login Form Validation with Shake Effect

16. Form with Email & Password Validation in JS

17. School Registration Form in HTML and CSS

18. Animated Login Registration Form in HTML CSS

19. Login Form with Facebook and Twitter Buttons

20. Website with Login Registration Form in HTML CSS

21. Login and Signup Form with Sliding Animation

22. Gradient Background Login Form HTML and CSS

23. Login Form with Icons in HTML and CSS

24. Simple Login Form with Floating Label Animation

25. Login Form Validation in HTML CSS & JavaScript

26. Signup Form with Validation Feature in HTML

Conclusion and Final Words

Responsive Registration Form in HTML CSS & JavaScript | With Source Code

Registration Form in HTML CSS & JavaScript

You Might Like This:

Registration Form [Source Code]

Login and Registration Form in HTML CSS and JavaScript

Login & Registration Form in HTML CSS JavaScript

You Might Like This:

Login and Registration Form [Source Code]

Responsive Login and Registration Form in HTML and CSS

What is the Login and Registration Form

Login and Registration Form in HTML and CSS | Video Tutorial

You May Like This:

Login & Registration Form Template | Source Code

Responsive Registration Form in HTML and CSS

Registration Form in HTML and CSS | Video Tutorial

You Might Like This:

Registration Form | Sign-up form | Source Code