Responsive Login & Registration Form using HTML, CSS & JavaScript

Alizeh Codes September 05, 2025


Creating a Login and Registration Form is one of the most essential tasks for web developers, as it forms the base of almost every modern website or application. Whether it’s an e-commerce site, a social media platform, or a learning portal, login and signup features are always required.

A login form allows users to enter their credentials (username/email and password) to securely access a website, while a registration form (also called a sign-up form) enables new users to create an account.

In this tutorial, you will learn step by step how to build a responsive Login & Registration Form using HTML, CSS, and JavaScript. We’ll start from scratch by writing the HTML structure, then style it with CSS, and finally add interactivity using JavaScript.

Recently, we also shared a tutorial on creating Button Click Animation, and if you found that useful, you’re definitely going to enjoy this guide as well.


Video Tutorial

If you prefer learning visually, you can follow the complete video tutorial below. Otherwise, you may continue reading this detailed written guide.



Steps to Build Login & Registration Form

We will build this project in two main parts:

  1. Setting up the File Structure

  2. Designing and Animating the Form


1. File Structure of the Project

To get started, create the following files inside your project folder:

index.html → for the HTML structure

style.css → for styling and design

script.js → for adding JavaScript functionality

This setup will help us keep our project clean and easy to manage.


2. Creating the Login & Registration Form

Once the files are ready, let’s design the form. First, we’ll create the basic structure in HTML, then apply CSS for styling, and finally use JavaScript to switch between login and register modes.

For example, in your index.html file, you’ll add the form fields (username, password, email, etc.) and the two buttons for toggling between login and registration. 


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Login & Signup Form</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <section class="wrapper">
      <div class="form signup">
        <header>Signup</header>
        <form action="#">
          <input type="text" placeholder="Full name" required />
          <input type="text" placeholder="Email address" required />
          <input type="password" placeholder="Password" required />
          <div class="checkbox">
            <input type="checkbox" id="signupCheck" />
            <label for="signupCheck">I accept all terms & conditions</label>
          </div>
          <input type="submit" value="Signup" />
        </form>
      </div>
      <div class="form login">
        <header>Login</header>
        <form action="#">
          <input type="text" placeholder="Email address" required />
          <input type="password" placeholder="Password" required />
          <a href="#">Forgot password?</a>
          <input type="submit" value="Login" />
        </form>
      </div>
      <script>
        const wrapper = document.querySelector(".wrapper"),
          signupHeader = document.querySelector(".signup header"),
          loginHeader = document.querySelector(".login header");
        loginHeader.addEventListener("click", () => {
          wrapper.classList.add("active");
        });
        signupHeader.addEventListener("click", () => {
          wrapper.classList.remove("active");
        });
      </script>
    </section>
  </body>
</html>


Then, in style.css, you can add styles to make it responsive and attractive. Finally, in script.js, you can write a small script to handle the switching animation when a user clicks on the buttons.


* {
  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;
}


Final Thoughts

By following the above steps, you’ve successfully built a Login & Registration Form that is responsive and user-friendly. This is a great project for beginners who want to practice HTML, CSS, and JavaScript while working on something practical.

There are many variations of login and signup forms you can explore to improve your skills further. If you found this guide helpful, don’t forget to share it with your friends and community. Your support motivates us to create more free resources for developers like you.

If you face any issues while building the form or your code isn’t working as expected, you can download the complete source code for free by clicking the download button below. You can also check out a live demo to see how it works in real-time.


Tags: responsive login form, registration form in HTML CSS, login signup form tutorial, animated login registration form, HTML CSS JavaScript projects for beginners.


Tags:

Post a Comment

0 Comments