Form Design – CodingNepal

Website with Login & Registration Form in HTML CSS & JavaScript

CodingNepal — Sun, 09 Apr 2023 21:11:21 +0000

While learning web development creating a website with a Login and Registration Form could be the best project for beginners to intermediate-level web developers.

Today in this blog you will learn how to build a website that includes a Login and Registration Form using HTML, CSS, and JavaScript. While I have previously designed many websites with Login and Registration Forms, they were created as separate entities.

As you can see on the given image of the Website with the Login & Signup Form that you will be going to learn to create today. The website will have a navigation bar with a logo and nav links with a button that will toggle the form. To toggle the login and registration form there is a button at the bottom of the form.

Website with Login & Registration Form in HTML CSS & JS

As demonstrated in the video tutorial of the website featuring a login and registration form, initially, a website with a navigation bar was presented. Upon clicking the login button, the login form was displayed, and upon clicking the signup button, the registration form appeared.

I would highly recommend you watch the provided video tutorial. In the video tutorial, I have shown to create a website with a login and registration form step by step as well as I have commented on the code to make it easier to understand.

Steps for Creating a Website with Login & Registration Form

To create a Website with Login & Registration Form 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 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
Download the background image and put this image inside the project folder. This is the website background image.

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 all the source code files of the Website with the Login & Registration Form, by clicking on the given download button.

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




  
    
    
    
    Website with Login & Registration Form
    
    
    
  
  
    
    
      
        CodingLab

        
          
            Home
            Product
            Services
            Contact
          
        

        
      
    

    
    
      
        
        
        
          
            Login

            
              
              
            
            
              
              
              
            

            
              
                
                Remember me
              
              Forgot password?
            

            

            Don't have an account? Signup
          
        

        
        
          
            Signup

            
              
              
            
            
              
              
              
            
            
              
              
              
            

            

            Already have an account? Login

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;
}
a {
  text-decoration: none;
}
.header {
  position: fixed;
  height: 80px;
  width: 100%;
  z-index: 100;
  padding: 0 20px;
}
.nav {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
}
.nav,
.nav_item {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: space-between;
}
.nav_logo,
.nav_link,
.button {
  color: #fff;
}
.nav_logo {
  font-size: 25px;
}
.nav_item {
  column-gap: 25px;
}
.nav_link:hover {
  color: #d9d9d9;
}
.button {
  padding: 6px 24px;
  border: 2px solid #fff;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
}
.button:active {
  transform: scale(0.98);
}

/* Home */
.home {
  position: relative;
  height: 100vh;
  width: 100%;
  background-image: url("bg.jpg");
  background-size: cover;
  background-position: center;
}
.home::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: all 0.5s ease-out;
}
.home.show::before {
  opacity: 1;
  pointer-events: auto;
}
/* From */
.form_container {
  position: fixed;
  max-width: 320px;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1.2);
  z-index: 101;
  background: #fff;
  padding: 25px;
  border-radius: 12px;
  box-shadow: rgba(0, 0, 0, 0.1);
  opacity: 0;
  pointer-events: none;
  transition: all 0.4s ease-out;
}
.home.show .form_container {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}
.signup_form {
  display: none;
}
.form_container.active .signup_form {
  display: block;
}
.form_container.active .login_form {
  display: none;
}
.form_close {
  position: absolute;
  top: 10px;
  right: 20px;
  color: #0b0217;
  font-size: 22px;
  opacity: 0.7;
  cursor: pointer;
}
.form_container h2 {
  font-size: 22px;
  color: #0b0217;
  text-align: center;
}
.input_box {
  position: relative;
  margin-top: 30px;
  width: 100%;
  height: 40px;
}
.input_box input {
  height: 100%;
  width: 100%;
  border: none;
  outline: none;
  padding: 0 30px;
  color: #333;
  transition: all 0.2s ease;
  border-bottom: 1.5px solid #aaaaaa;
}
.input_box input:focus {
  border-color: #7d2ae8;
}
.input_box i {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  color: #707070;
}
.input_box i.email,
.input_box i.password {
  left: 0;
}
.input_box input:focus ~ i.email,
.input_box input:focus ~ i.password {
  color: #7d2ae8;
}
.input_box i.pw_hide {
  right: 0;
  font-size: 18px;
  cursor: pointer;
}
.option_field {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.form_container a {
  color: #7d2ae8;
  font-size: 12px;
}
.form_container a:hover {
  text-decoration: underline;
}
.checkbox {
  display: flex;
  column-gap: 8px;
  white-space: nowrap;
}
.checkbox input {
  accent-color: #7d2ae8;
}
.checkbox label {
  font-size: 12px;
  cursor: pointer;
  user-select: none;
  color: #0b0217;
}
.form_container .button {
  background: #7d2ae8;
  margin-top: 30px;
  width: 100%;
  padding: 10px 0;
  border-radius: 10px;
}
.login_signup {
  font-size: 12px;
  text-align: center;
  margin-top: 15px;
}

Third, paste the following codes into your script.js file.

const formOpenBtn = document.querySelector("#form-open"),
  home = document.querySelector(".home"),
  formContainer = document.querySelector(".form_container"),
  formCloseBtn = document.querySelector(".form_close"),
  signupBtn = document.querySelector("#signup"),
  loginBtn = document.querySelector("#login"),
  pwShowHide = document.querySelectorAll(".pw_hide");

formOpenBtn.addEventListener("click", () => home.classList.add("show"));
formCloseBtn.addEventListener("click", () => home.classList.remove("show"));

pwShowHide.forEach((icon) => {
  icon.addEventListener("click", () => {
    let getPwInput = icon.parentElement.querySelector("input");
    if (getPwInput.type === "password") {
      getPwInput.type = "text";
      icon.classList.replace("uil-eye-slash", "uil-eye");
    } else {
      getPwInput.type = "password";
      icon.classList.replace("uil-eye", "uil-eye-slash");
    }
  });
});

signupBtn.addEventListener("click", (e) => {
  e.preventDefault();
  formContainer.classList.add("active");
});
loginBtn.addEventListener("click", (e) => {
  e.preventDefault();
  formContainer.classList.remove("active");
});

That’s all, now you’ve successfully created a Website with a Login & Registration Form. If your code doesn’t work or you’ve faced any problems, please download the source code files from the given download button. It’s free and a zip file containing the project folder with source code files will be downloaded.

View Live Demo

Multi Step Progress Bar in HTML CSS & JavaScript

CodingNepal — Sun, 05 Feb 2023 21:11:22 +0000

The multi-step process enhances the user experience by dividing the registration process into smaller, more manageable steps. This reduces confusion and frustration for the user, as clear and concise guidance is provided throughout the process.

In this blog, you will learn how to create a Multi-Step Progress Bar using HTML CSS & JavaScript. As you can see in the image there will be a total of four steps and two buttons to control that multistep progress bar. Additionally, recently I thought to create Neumorphism Loading Animation, you may like that as well.

By the end of this blog post, you will have a Multi-Step Progress Bar. And, you can implement it in various sections like Registration or signup form.

Video Tutorial of Multi-Step Progress Bar

If you would like to create this multistep progress bar step by step, the video tutorial is provided below. Otherwise, you may continue reading.

Steps to create Multi Step Progress Bar in HTML CSS & JS

We will create this multistep progress bar in HTML CSS and JavaScript.

1. File Structure

In the initial step, we will create a new directory for our project. You can name it whatever you want, and inside this directory, create two files: index.html and style.css. These files will contain the necessary HTML and CSS code for the card slider.

2. Creating the Multi-Step Progress Bar

In the second step, we will create the layout and style the progress bar & buttons using HTML and CSS. In your index.html file, add the following HTML code to create the basic structure of the multi-step progress bar.




  
    
    
    
    Multi Step Progress
    
    
  
  
    
      
        1
        2
        3
        4

In your style.css file, add the following CSS code to style the multi-step progress bar. If you want, you can change the font, size, color, and background of the progress bar & buttons by slightly modifying this code.

/* 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 {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f6f7fb;
}
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  max-width: 400px;
  width: 100%;
}
.container .steps {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
.steps .circle {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  width: 50px;
  color: #999;
  font-size: 22px;
  font-weight: 500;
  border-radius: 50%;
  background: #fff;
  border: 4px solid #e0e0e0;
  transition: all 200ms ease;
  transition-delay: 0s;
}
.steps .circle.active {
  transition-delay: 100ms;
  border-color: #4070f4;
  color: #4070f4;
}
.steps .progress-bar {
  position: absolute;
  height: 4px;
  width: 100%;
  background: #e0e0e0;
  z-index: -1;
}
.progress-bar .indicator {
  position: absolute;
  height: 100%;
  width: 0%;
  background: #4070f4;
  transition: all 300ms ease;
}
.container .buttons {
  display: flex;
  gap: 20px;
}
.buttons button {
  padding: 8px 25px;
  background: #4070f4;
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  cursor: pointer;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
  transition: all 200ms linear;
}
.buttons button:active {
  transform: scale(0.97);
}
.buttons button:disabled {
  background: #87a5f8;
  cursor: not-allowed;
}

Finally, add the following JavaScript code to your script.js file to add functionality for creating a multi-step progress bar.

 //DOM Elements
const circles = document.querySelectorAll(".circle"),
  progressBar = document.querySelector(".indicator"),
  buttons = document.querySelectorAll("button");

let currentStep = 1;

// function that updates the current step and updates the DOM
const updateSteps = (e) => {
  // update current step based on the button clicked
  currentStep = e.target.id === "next" ? ++currentStep : --currentStep;

  // loop through all circles and add/remove "active" class based on their index and current step
  circles.forEach((circle, index) => {
    circle.classList[`${index < currentStep ? "add" : "remove"}`]("active");
  });

  // update progress bar width based on current step
  progressBar.style.width = `${((currentStep - 1) / (circles.length - 1)) * 100}%`;

  // check if current step is last step or first step and disable corresponding buttons
  if (currentStep === circles.length) {
    buttons[1].disabled = true;
  } else if (currentStep === 1) {
    buttons[0].disabled = true;
  } else {
    buttons.forEach((button) => (button.disabled = false));
  }
};

// add click event listeners to all buttons
buttons.forEach((button) => {
  button.addEventListener("click", updateSteps);
});

Conclusion and Final Words

By following the steps in this blog post, you have successfully created a Multi-Step Progress Bar using HTML, CSS, and JavaScript. Now it’s up to you to experiment with the code and make it more useful.

If you encounter any problems or your code is not working as expected, you can download the source code files of this Multi Step Progress Bar project by clicking on the given download button. It’s free, and a zip file will be downloaded that contains the project folder with source code files.

Login & Registration Form in HTML CSS & JavaScript

CodingNepal — Sun, 15 Jan 2023 21:11:21 +0000

Creating a login and registration form is a common task for developers, as it is a fundamental aspect of many web applications. As a developer, learning to create these forms can help you become more proficient in developing & designing.

A login form is a type of form that allows users to enter their credentials (such as a username and password) to gain access to a protected area of a website or application. A registration form, also known as a sign-up form, is a type of form that allows users to create an account on a website or application.

Today in this blog you will learn how to create a responsive Login & Registration Form in HTML CSS & JavaScript. The blog will cover everything from the basics of creating a Login & Registration in HTML, to styling it with CSS and adding with JavaScript. Recently I have provided a blog on Button Click Animation, I hope you will find this blog helpful as well.

Video Tutorial of Login & Registration Form

If you would like to create this Login & Registration From step by step, the complete video demonstration of the demo is provided below. In this video tutorial, you will. Alternatively, you may continue reading this written guide on the same topic.

Steps to Create Login & Registration Form

We will create this Login & Registration Form in two steps:

File Structure of the Project
Creating Login & Registration From

1. File Structure of the Project

To build this Login & Registration Form, we’ll be using two separate files – index.html and style.css. These files will contain the HTML, CSS, and JavaScript code respectively needed to bring the Login & Registration Form. Let’s get started by setting up these files and adding the basic code.

Once you have made these files, you can proceed to the next step of creating your Button Click Animation.

2. Creating Button Click Animation

In the second step, we will design the user interface for our Login & Registration Form and style it using HTML and CSS. Once the user interface is complete, we will use JavaScript to animate these two forms on click.

In the index.html file, add the following HTML and JavaScript code to create the basic structure of the animated button.




  
    
    
    
   Login & Signup Form
    
  
  
    
      
        Signup
        
          
          
          
          
            
            I accept all terms & conditions
          
          
        
      

      
        Login
        
          
          
          Forgot password?

In the style.css file, add the following CSS code to add styles and make the button and its bubbles. If you want, you can change the color, background, font, and size of the button in this code.

/* 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;
  background: #f0faff;
}
.wrapper {
  position: relative;
  max-width: 470px;
  width: 100%;
  border-radius: 12px;
  padding: 20px
    30px
    120px;
  background: #4070f4;
  box-shadow: 0
    5px
    10px
    rgba(
      0,
      0,
      0,
      0.1
    );
  overflow: hidden;
}
.form.login {
  position: absolute;
  left: 50%;
  bottom: -86%;
  transform: translateX(
    -50%
  );
  width: calc(
    100% +
      220px
  );
  padding: 20px
    140px;
  border-radius: 50%;
  height: 100%;
  background: #fff;
  transition: all
    0.6s
    ease;
}
.wrapper.active
  .form.login {
  bottom: -15%;
  border-radius: 35%;
  box-shadow: 0 -5px
    10px rgba(0, 0, 0, 0.1);
}
.form
  header {
  font-size: 30px;
  text-align: center;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}
.form.login
  header {
  color: #333;
  opacity: 0.6;
}
.wrapper.active
  .form.login
  header {
  opacity: 1;
}
.wrapper.active
  .signup
  header {
  opacity: 0.6;
}
.wrapper
  form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 40px;
}
form
  input {
  height: 60px;
  outline: none;
  border: none;
  padding: 0
    15px;
  font-size: 16px;
  font-weight: 400;
  color: #333;
  border-radius: 8px;
  background: #fff;
}
.form.login
  input {
  border: 1px
    solid
    #aaa;
}
.form.login
  input:focus {
  box-shadow: 0
    1px 0
    #ddd;
}
form
  .checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
}
.checkbox
  input[type="checkbox"] {
  height: 16px;
  width: 16px;
  accent-color: #fff;
  cursor: pointer;
}
form
  .checkbox
  label {
  cursor: pointer;
  color: #fff;
}
form a {
  color: #333;
  text-decoration: none;
}
form
  a:hover {
  text-decoration: underline;
}
form
  input[type="submit"] {
  margin-top: 15px;
  padding: none;
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
}
.form.login
  input[type="submit"] {
  background: #4070f4;
  color: #fff;
  border: none;
}

Conclusions and Final Words

By following the steps you have successfully created a Login & Registration Form. There are lots of Login and Signup Forms you can find on this website to enhance your skills in creating forms. If you found this blog helpful, please consider sharing it with others. Your support helps us continue creating valuable content and resources for the development community. Thank you for your support!

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 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.

OTP Verification Form in HTML CSS & JavaScript

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

If you are seeking a form that is designed for verifying one-time passwords and want to learn how to create it in HTML CSS & JavaScript then this blog could meet you demands.

In this blog you will learn to How to create OTP Verification Form in HTML CSS & JavaScript. You will learn how to structure the form and input fields using HTML, how to style the form and input fields using CSS, and how to handle the form submission and verify the OTP using JavaScript. In the recent blog I have created Star Rating System I hove that will also help to enhance you coding skills.

An OTP (one-time password) form is a type of form used to verify the identity of a user by requiring them to enter a unique code that is sent to their email or phone number. OTPs are commonly used as a security measure to prevent unauthorized access to sensitive information or accounts.

Have a look on the given image of our OTP Verification Form. As you can see in this form we wil have one icon at top, text, five input fields and a button. To watch the demo of this project and create this OTP Form step by step you can watch the given video tutorial.

Video Tutorial | OTP Form in HTML CSS & JavaScript

In the video tutorial on creating an OTP verification form, you may have noticed that the form initially appeared with all input fields and the submit button disabled, except for the first input field, which was already focused. As the user entered numbers into the first field, the focus automatically moved to the next field, and so on until all fields were filled.

Once all fields were completed, the submit button became active and could be clicked to submit the form. This process helps to ensure that the user correctly enters the OTP and allows for a smooth and efficient user experience.

I hope that you are now able to create an OTP verification form using HTML, CSS, and JavaScript. If you are still experiencing any challenges, I have provided the source code that I used to create this form for your reference.

OTP Verification Form in HTML CSS & JS [Source Code]

To create OTP Verification Form in HTML CSS & 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 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 OTP Verification Form in HTML CSS & JavaScript by clicking on the given download button.

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




  
    
    
    
   OTP Verification Form
    
    
    
   
  
  
    
      
        
      
      Enter OTP Code

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;
  background: #4070f4;
}
:where(.container, form, .input-field, header) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.container {
  background: #fff;
  padding: 30px 65px;
  border-radius: 12px;
  row-gap: 20px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.container header {
  height: 65px;
  width: 65px;
  background: #4070f4;
  color: #fff;
  font-size: 2.5rem;
  border-radius: 50%;
}
.container h4 {
  font-size: 1.25rem;
  color: #333;
  font-weight: 500;
}
form .input-field {
  flex-direction: row;
  column-gap: 10px;
}
.input-field input {
  height: 45px;
  width: 42px;
  border-radius: 6px;
  outline: none;
  font-size: 1.125rem;
  text-align: center;
  border: 1px solid #ddd;
}
.input-field input:focus {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}
.input-field input::-webkit-inner-spin-button,
.input-field input::-webkit-outer-spin-button {
  display: none;
}
form button {
  margin-top: 25px;
  width: 100%;
  color: #fff;
  font-size: 1rem;
  border: none;
  padding: 9px 0;
  cursor: pointer;
  border-radius: 6px;
  pointer-events: none;
  background: #6e93f7;
  transition: all 0.2s ease;
}
form button.active {
  background: #4070f4;
  pointer-events: auto;
}
form button:hover {
  background: #0e4bf1;
}

Third, paste the following codes into your script.js file.

 const inputs = document.querySelectorAll("input"),
  button = document.querySelector("button");

// iterate over all inputs
inputs.forEach((input, index1) => {
  input.addEventListener("keyup", (e) => {
    // This code gets the current input element and stores it in the currentInput variable
    // This code gets the next sibling element of the current input element and stores it in the nextInput variable
    // This code gets the previous sibling element of the current input element and stores it in the prevInput variable
    const currentInput = input,
      nextInput = input.nextElementSibling,
      prevInput = input.previousElementSibling;

    // if the value has more than one character then clear it
    if (currentInput.value.length > 1) {
      currentInput.value = "";
      return;
    }
    // if the next input is disabled and the current value is not empty
    //  enable the next input and focus on it
    if (nextInput && nextInput.hasAttribute("disabled") && currentInput.value !== "") {
      nextInput.removeAttribute("disabled");
      nextInput.focus();
    }

    // if the backspace key is pressed
    if (e.key === "Backspace") {
      // iterate over all inputs again
      inputs.forEach((input, index2) => {
        // if the index1 of the current input is less than or equal to the index2 of the input in the outer loop
        // and the previous element exists, set the disabled attribute on the input and focus on the previous element
        if (index1 <= index2 && prevInput) {
          input.setAttribute("disabled", true);
          input.value = "";
          prevInput.focus();
        }
      });
    }
    //if the fourth input( which index number is 3) is not empty and has not disable attribute then
    //add active class if not then remove the active class.
    if (!inputs[3].disabled && inputs[3].value !== "") {
      button.classList.add("active");
      return;
    }
    button.classList.remove("active");
  });
});

//focus the first input which index is 0 on window load
window.addEventListener("load", () => inputs[0].focus());

If you face any difficulties while creating your OTP Verification Form or your code is not working as expected, you can download the source code files for this OTP Verification 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

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!

Create Responsive Login & Registration Form in HTML CSS

CodingNepal — Sun, 20 Nov 2022 21:11:20 +0000

If you are looking for user-friendly Responsive Login & Registration Form created from HTML & CSS and want to learn to make a Login & Registration Form, this blog is written for you.

In this blog, you will learn how to create a Responsive Login & Registration Form in HTML & CSS. Even if you have a basic knowledge of HTML & CSS then also you will be able to create a Sign in and signup page using basic HTML & CSS code. Recently I uploaded a blog post on Cookies Consent Box Javascript I hope it will help to boost your JavaScript skills.

A Login Form is a Section where users have to input their login details to enter a particular website or application and a Registration Form is a place where users can create their login details to get login details or to register their details for different purposes.

Have a look at the given preview of my Login and Registration Form. As you can see, there are two forms the left one is the Sign-in Form and the right one is the Signup Form. On these forms, there are input fields for email address and password and a button. At the bottom of these two forms, there are two links: one to create a Signup account and another to log in.

I have explained all the HTML and CSS code that I have used to create this Login and Registration Form also if you want to create this Sign in and Signup page with me step by step, then you can watch the video tutorial that I have given below.

Login & Registration Form in HTML CSS | Video Tutorial

I have provided all the HTML and CSS code that I have used to create this Login and Registration form. Before getting into the source code file, rather than copying the code or downloading the source code file, I highly recommend you watch the full video tutorial of this login and signup page. By watching the video tutorial, you will be able to create this login and signup page.

As you have seen in the video tutorial of this Login and Registration Form. At first, there was only a Login Page with email, a password field, and a button. Underneath that button, there was a link that redirected us to the signup page, and the Login page disappeared. Similarly, on the Signup up page, there were input fields, a button, and a link that took us to the Login Page.

I hope now you can create this Login and Registration in HTML and CSS. If you want to take all the HTML and CSS code that I have used to create this Login and Signup then all the source codes are given below.

Login & Registration Form in HTML CSS [Source Codes]

To create Login & Registration Form, 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

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 Login & Registration Form by clicking on the given download button.

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





  
  
  
  Login & Registration Form
  
  


  
    
    
      Login
      
        
        
        Forgot password?
        
      
      
        Don't have an account?
         Signup
        
      
    
    
      Signup
      
        
        
        
        
      
      
        Already have an account?
         Login

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;
  width: 100%;
  background: #009579;
}
.container{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  max-width: 430px;
  width: 100%;
  background: #fff;
  border-radius: 7px;
  box-shadow: 0 5px 10px rgba(0,0,0,0.3);
}
.container .registration{
  display: none;
}
#check:checked ~ .registration{
  display: block;
}
#check:checked ~ .login{
  display: none;
}
#check{
  display: none;
}
.container .form{
  padding: 2rem;
}
.form header{
  font-size: 2rem;
  font-weight: 500;
  text-align: center;
  margin-bottom: 1.5rem;
}
 .form input{
   height: 60px;
   width: 100%;
   padding: 0 15px;
   font-size: 17px;
   margin-bottom: 1.3rem;
   border: 1px solid #ddd;
   border-radius: 6px;
   outline: none;
 }
 .form input:focus{
   box-shadow: 0 1px 0 rgba(0,0,0,0.2);
 }
.form a{
  font-size: 16px;
  color: #009579;
  text-decoration: none;
}
.form a:hover{
  text-decoration: underline;
}
.form input.button{
  color: #fff;
  background: #009579;
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 1px;
  margin-top: 1.7rem;
  cursor: pointer;
  transition: 0.4s;
}
.form input.button:hover{
  background: #006653;
}
.signup{
  font-size: 17px;
  text-align: center;
}
.signup label{
  color: #009579;
  cursor: pointer;
}
.signup label:hover{
  text-decoration: underline;
}

That’s all, now you’ve successfully created a project on Login & Registration Form. If your code doesn’t work or you’ve faced any problems, please download the source code files from the given download button. It’s free and a zip file containing the project folder with source code files will be downloaded.

How to Validate Email & Password in HTML CSS JavaScript

CodingNepal — Wed, 17 Aug 2022 21:11:20 +0000

Hello friend, I hope you are doing and creating creative pieces of stuff. Today in this blog, you will learn How to Validate Email & Password in HTML CSS JavaScript. Although, I have a separate blog about Email Validation, Password Validation, and Password Show Hide, this time I’m going to add all these sections in one form.

Email and Password Validation means the process of verifying the email address and the strength of the password the user has input. And, the password show hide means showing and hiding the password while clicking on the icon for security purposes.

Have a quick look at the given image of our project Email and Password Validation. On the left side form, you can see three input blank input fields and one button. On another right-side form, you can see I have filled in some invalid data, that’s why there is some red-colored text with an error message.

Actually when we put inaccurate data on the input field or directly click on the button then those errors appear with an error message. On the password field, on the right side, we can see the eye icon. When we click on the icon, it helps us to show the characters that we filled. The confirm password field will check the created password and the confirmed password is matching or not.

Rather than theoretically, I would highly recommend you to watch the given video tutorial of our project [How to Validate Email & Password in HTML CSS JavaScript], in that video, I have shown a demo of this project and all the HTML CSS & JavaScript code that I have used to validate this email and password and of course password show and hide feature.

Email and Password Validation in HTML CSS & JavaScript

I have provided all the HTML CSS & JavaScript code that I have used to Validate Email, Password, and Show/Hide passwords. Before getting into the source code file, Let me explain the given video tutorial on this form validation briefly.

As you have seen in the video tutorial. At first, there was a signup form with three empty input fields and a button. When I clicked on the button without filling in the required date, a red error message appeared. After that when I started to enter my valid data the error message disappeared. Also, we could show and hide passwords by clicking on the eye icon. The email required proper valid email formation and the create password field needs the combination of numbers, special symbols, capital, and small letter. Basically, we need not put eight characters by mixing all those characters.

To make this sign-up form I have used HTML and CSS to validate the form and to show and hide the password, I have used some JavaScript code.

I accept, now you can create this type of form and validate email and password using HTML CSS and JavaScript, and also show and hide passwords while clicking on the eye icon with changing icon. If you are feeling complicated, I have provided all the HTML CSS and JavaScript code below.

Email & Password Validation [Source Code]

To get the following HTML CSS and JavaScript code for the Email & Password Validation, 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.




  
    
    
    
    Email and Password Validation

    
    

    
    
  
  
    
      Signup
      
        
          
            
          
          
            
            Please enter a valid email
          
        
        
          
            
            
          
          
            
            
              Please enter atleast 8 charatcer with number, symbol, small and
              capital letter.
            
          
        
        
          
            
            
          
          
            
            Password don't match

/* Google Fonts - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@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: 370px;
  width: 100%;
  padding: 25px;
  border-radius: 8px;
  background-color: #fff;
}
.container header {
  font-size: 22px;
  font-weight: 600;
  color: #333;
}
.container form {
  margin-top: 30px;
}
form .field {
  margin-bottom: 20px;
}
form .input-field {
  position: relative;
  height: 55px;
  width: 100%;
}
.input-field input {
  height: 100%;
  width: 100%;
  outline: none;
  border: none;
  border-radius: 8px;
  padding: 0 15px;
  border: 1px solid #d1d1d1;
}
.invalid input {
  border-color: #d93025;
}
.input-field .show-hide {
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: #919191;
  cursor: pointer;
  padding: 3px;
}
.field .error {
  display: flex;
  align-items: center;
  margin-top: 6px;
  color: #d93025;
  font-size: 13px;
  display: none;
}
.invalid .error {
  display: flex;
}
.error .error-icon {
  margin-right: 6px;
  font-size: 15px;
}
.create-password .error {
  align-items: flex-start;
}
.create-password .error-icon {
  margin-top: 4px;
}
.button {
  margin: 25px 0 6px;
}
.button input {
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  background-color: #4070f4;
  cursor: pointer;
  transition: all 0.3s ease;
}
.button input:hover {
  background-color: #0e4bf1;
}

const form = document.querySelector("form"),
  emailField = form.querySelector(".email-field"),
  emailInput = emailField.querySelector(".email"),
  passField = form.querySelector(".create-password"),
  passInput = passField.querySelector(".password"),
  cPassField = form.querySelector(".confirm-password"),
  cPassInput = cPassField.querySelector(".cPassword");

// Email Validtion
function checkEmail() {
  const emaiPattern = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/;
  if (!emailInput.value.match(emaiPattern)) {
    return emailField.classList.add("invalid"); //adding invalid class if email value do not mathced with email pattern
  }
  emailField.classList.remove("invalid"); //removing invalid class if email value matched with emaiPattern
}

// Hide and show password
const eyeIcons = document.querySelectorAll(".show-hide");

eyeIcons.forEach((eyeIcon) => {
  eyeIcon.addEventListener("click", () => {
    const pInput = eyeIcon.parentElement.querySelector("input"); //getting parent element of eye icon and selecting the password input
    if (pInput.type === "password") {
      eyeIcon.classList.replace("bx-hide", "bx-show");
      return (pInput.type = "text");
    }
    eyeIcon.classList.replace("bx-show", "bx-hide");
    pInput.type = "password";
  });
});

// Password Validation
function createPass() {
  const passPattern =
    /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;

  if (!passInput.value.match(passPattern)) {
    return passField.classList.add("invalid"); //adding invalid class if password input value do not match with passPattern
  }
  passField.classList.remove("invalid"); //removing invalid class if password input value matched with passPattern
}

// Confirm Password Validtion
function confirmPass() {
  if (passInput.value !== cPassInput.value || cPassInput.value === "") {
    return cPassField.classList.add("invalid");
  }
  cPassField.classList.remove("invalid");
}

// Calling Funtion on Form Sumbit
form.addEventListener("submit", (e) => {
  e.preventDefault(); //preventing form submitting
  checkEmail();
  createPass();
  confirmPass();

  //calling function on key up
  emailInput.addEventListener("keyup", checkEmail);
  passInput.addEventListener("keyup", createPass);
  cPassInput.addEventListener("keyup", confirmPass);

  if (
    !emailField.classList.contains("invalid") &&
    !passField.classList.contains("invalid") &&
    !cPassField.classList.contains("invalid")
  ) {
    location.href = form.getAttribute("action");
  }
});

If you face any difficulties while creating your Form Validation or your code is not working as expected, you can download the source code files for this Email Password Validation 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

How to Validate Email in HTML CSS & JavaScript | Email Checker

CodingNepal — Wed, 10 Aug 2022 21:11:20 +0000

Hello friend, I hope you are doing and creating awesome projects. Today in this blog you will learn to Validate an Email Address in HTML CSS and JavaScript. There are lots of validation projects that you can found on this blog like Email Validation, password, and confirm password validation.

An Email Validation means authenticating the email address that the user filled. You can see on the apps of the website where a login or signup form available and we need to enter our email address and password to register. For such things, a valid email address is needed.

Let’s have a quick look at the given image of our project [How to Validate Email Address]. On the image, you can see three input fields with text and icons. On the first input email field, we can see it is empty, on the second input email field, we can see an invalid email that’s why the icon color is red and on the third input email field, we can see a valid email that’s why the color of the icon is green and check icon. The color icons will automatically while you are typing the email.

You can watch the real demo of this email checker by watching the given video tutorial. Also by watching the given video tutorial, you will get the idea of how all HTML CSS, and JavaScript code are working behind this email validator.

Validate Email Address in JavaScript | Email Checker

I have provided all the HTML CSS and JavaScript code that I have used to create this Email Checker. Before getting into the source code file, I would like to explain the given video tutorial of email validators briefly.

As you have seen in the video tutorial on Email verifiers. At first, there was an empty input email field with grey colored icon, when I started to type my email the icon changed to red color and when I completed my email address with a valid email address, the icon colored change to green with a check icon.

To make the UI design of the input field I have used HTML and CSS only to validate the email address and change the color of the icon and icon, I have used some JavaScript Code, and to validate the email address I have used some regex pattern.

I hope, now you can create this Email Checker using HTML CSS, and JavaScript, if you are feeling difficulty validating the email address, I have provided all the source code below.

Email Checker [Source Code]

To get the following HTML and CSS code for the Email Checker 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 given codes on your document. You can also download all source code files from the given download button.




  
    
    
    
   JavaScript Email Vaidation

/* Google Fonts - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&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: #e3f2fd;
}
.input-field {
  position: relative;
  height: 50px;
  width: 280px;
  border-radius: 6px;
  background-color: #fff;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.input-field input {
  height: 100%;
  width: 100%;
  border: none;
  outline: none;
  border-radius: 6px;
  padding: 0 15px;
  font-size: 15px;
  font-weight: 400;
  color: #333;
}
input::placeholder {
  color: #b4b4b4;
}
.input-field .email-icon {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  color: #b4b4b4;
}

If you face any difficulties while creating your Valid Email Checker or your code is not working as expected, you can download the source code files for this Valid Email Checker 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

Login & Signup Form in HTML CSS JavaScript | With Source Code

CodingNepal — Sun, 19 Jun 2022 21:11:20 +0000

Hey buddy, I hope you are doing and creating awesome stuff. Today in this blog I have brought something extraordinary project for you. As you know there are lots of Form Designs I have built in my previous blog.

Today I’m going to build a responsive Login and Signup Form using HTML CSS and JavaScript. When you click on the login link the signup form will appear and when you click on the signup form the login form will appear. I have also added a password hide and shoe feature.

Login and Signup Form are the section where users have to fill in details to excess the webpage or application. A login form is used to put the user login and password that the user has already created and the signup form is the page where user can create their login details by filling in their own data as the form requires.

Have a quick look at the given image of our project [Log in & Signup Form], On the left side, you can see a login form that contains two input fields where the user needs to put their email and password, bottom of that there is forgot password link, login button. At first, when you enter the password, it will appear on the dot form to see the password character you have to click on the eye icon that is available on the password field.

Underneath the login button, you can see a signup link, actually, when you click on the signup button the signup form which is on the right side will appear and login form will disappear. I have provided some media buttons for creating and signing in both login and signup forms.

Similarly, on the signup form, you can see three input fields first input field is form email and the second and third input fields are for creating passwords, underneath the input fields there is a signup button. As with the login form you can see, there is a login link on the signup form underneath the signup button. Obviously, when you click on the signup form the login form will appear and the sign-up form will disappear.

Let’s watch the real demo of this project [Login & Signup Form] and the HTML CSS code that I have used to create this project.

Login & Signup Form in HTML CSS JavaScript | Video Tutorial

I have provided all the HTML CSS and JavaScript code that I have used to create this Login and Signup Form. Before getting into the source code file I would like to explain the video tutorial that I have given.

As you have seen in the video tutorial on the Login and Signup Form. At first, there was only a signup form. On the signup form, you have seen two input fields one is for email and the second is for password. Underneath those input fields, we have seen a forgot password button. On the underside of the button there was a link and two social media buttons for login. When I clicked on the create account link, the login form disappeared and the signup form appeared.

On the signup form, there is three input field one is form email and the other two are for creating a password. Below those input fields, there was a button. Similarly lower than that there is a login link and two social media buttons for creating an account. To create the login and signup form UI, I have used HTML and CSS only. To appear and disappear those login and sign-up forms while we click on the login and signup link, a and to show and hide the password I have used some JavaScript code.

Now I believe, you can build this Login and Signup Form using HTML CSS, and JavaScript. If you are feeling difficulty creating this form. I have provided all the source codes below.

Login & Signup Form [Source Code]

To get the following HTML CSS and JavaScript code for the Login & Signup 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 Login and Signup Form 

        
        
                
        
        
                        
    
    
        
            
                
                    Login
                    
                        
                            
                        

                        
                            
                            
                        

                        
                            Forgot password?
                        

                        
                            
                        
                    

                    
                        Don't have an account? Signup
                    
                

                

                
                    
                        
                        Login with Facebook
                    
                

                
                    
                        
                        Login with Google
                    
                

            

            

            
                
                    Signup
                    
                        
                            
                        

                        
                            
                        

                        
                            
                            
                        

                        
                            
                        
                    

                    
                        Already have an account? Login
                    
                

                

                
                    
                        
                        Login with Facebook
                    
                

                
                    
                        
                        Login with Google

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

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
.container{
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #4070f4;
    column-gap: 30px;
}
.form{
    position: absolute;
    max-width: 430px;
    width: 100%;
    padding: 30px;
    border-radius: 6px;
    background: #FFF;
}
.form.signup{
    opacity: 0;
    pointer-events: none;
}
.forms.show-signup .form.signup{
    opacity: 1;
    pointer-events: auto;
}
.forms.show-signup .form.login{
    opacity: 0;
    pointer-events: none;
}
header{
    font-size: 28px;
    font-weight: 600;
    color: #232836;
    text-align: center;
}
form{
    margin-top: 30px;
}
.form .field{
    position: relative;
    height: 50px;
    width: 100%;
    margin-top: 20px;
    border-radius: 6px;
}
.field input,
.field button{
    height: 100%;
    width: 100%;
    border: none;
    font-size: 16px;
    font-weight: 400;
    border-radius: 6px;
}
.field input{
    outline: none;
    padding: 0 15px;
    border: 1px solid#CACACA;
}
.field input:focus{
    border-bottom-width: 2px;
}
.eye-icon{
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    font-size: 18px;
    color: #8b8b8b;
    cursor: pointer;
    padding: 5px;
}
.field button{
    color: #fff;
    background-color: #0171d3;
    transition: all 0.3s ease;
    cursor: pointer;
}
.field button:hover{
    background-color: #016dcb;
}
.form-link{
    text-align: center;
    margin-top: 10px;
}
.form-link span,
.form-link a{
    font-size: 14px;
    font-weight: 400;
    color: #232836;
}
.form a{
    color: #0171d3;
    text-decoration: none;
}
.form-content a:hover{
    text-decoration: underline;
}
.line{
    position: relative;
    height: 1px;
    width: 100%;
    margin: 36px 0;
    background-color: #d4d4d4;
}
.line::before{
    content: 'Or';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #FFF;
    color: #8b8b8b;
    padding: 0 15px;
}
.media-options a{
    display: flex;
    align-items: center;
    justify-content: center;
}
a.facebook{
    color: #fff;
    background-color: #4267b2;
}
a.facebook .facebook-icon{
    height: 28px;
    width: 28px;
    color: #0171d3;
    font-size: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
}
.facebook-icon,
img.google-img{
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
}
img.google-img{
    height: 20px;
    width: 20px;
    object-fit: cover;
}
a.google{
    border: 1px solid #CACACA;
}
a.google span{
    font-weight: 500;
    opacity: 0.6;
    color: #232836;
}

@media screen and (max-width: 400px) {
    .form{
        padding: 20px 10px;
    }
    
}

 const forms = document.querySelector(".forms"),
      pwShowHide = document.querySelectorAll(".eye-icon"),
      links = document.querySelectorAll(".link");

pwShowHide.forEach(eyeIcon => {
    eyeIcon.addEventListener("click", () => {
        let pwFields = eyeIcon.parentElement.parentElement.querySelectorAll(".password");
        
        pwFields.forEach(password => {
            if(password.type === "password"){
                password.type = "text";
                eyeIcon.classList.replace("bx-hide", "bx-show");
                return;
            }
            password.type = "password";
            eyeIcon.classList.replace("bx-show", "bx-hide");
        })
        
    })
})      

links.forEach(link => {
    link.addEventListener("click", e => {
       e.preventDefault(); //preventing form submit
       forms.classList.toggle("show-signup");
    })
})

If you face any difficulties while creating your Login and Signup Form or your code is not working as expected, you can download the source code files for this Login and 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

Form Design – CodingNepal

Website with Login & Registration Form in HTML CSS & JavaScript

Website with Login & Registration Form in HTML CSS & JS

Steps for Creating a Website with Login & Registration Form

Login

Signup

Multi Step Progress Bar in HTML CSS & JavaScript

Video Tutorial of Multi-Step Progress Bar

Steps to create Multi Step Progress Bar in HTML CSS & JS

1. File Structure

2. Creating the Multi-Step Progress Bar

Conclusion and Final Words

Login & Registration Form in HTML CSS & JavaScript

Video Tutorial of Login & Registration Form

Steps to Create Login & Registration Form

1. File Structure of the Project

2. Creating Button Click Animation

OTP Verification Form in HTML CSS & JavaScript

Video Tutorial | OTP Form in HTML CSS & JavaScript

You May Like This:

OTP Verification Form in HTML CSS & JS [Source Code]

Enter OTP Code

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

Create Responsive Login & Registration Form in HTML CSS

Login & Registration Form in HTML CSS | Video Tutorial

You May Like This:

Login & Registration Form in HTML CSS [Source Codes]

How to Validate Email & Password in HTML CSS JavaScript

Email and Password Validation in HTML CSS & JavaScript

You Might Like This:

Email & Password Validation [Source Code]

How to Validate Email in HTML CSS & JavaScript | Email Checker

Validate Email Address in JavaScript | Email Checker

You Might Like This:

Email Checker [Source Code]

Login & Signup Form in HTML CSS JavaScript | With Source Code

Login & Signup Form in HTML CSS JavaScript | Video Tutorial

You Might Like This:

Login & Signup Form [Source Code]