Login and Registration Form Using HTML, CSS and JavaScript

Login and Registration Form Using HTML, CSS and JavaScript

Login forms and registration forms are important sections of a website that help provide security to the website and provide a private interface for every user so that their data can remain private and not be misused by any third party.

A registration form is used for entering the user details on the website for the first time when creating an account for the user, so that a unique username and password are generated for the user to use the services of the website privately.

Login forms are used by the user when he or she visits the same website again. To access the user’s personal space, the user needs to enter a unique username and password to log on to the website.

In this article, you will learn how to create a login and registration forms using HTML, CSS, and JavaScript programming code. We all know that a login form is a design that is used in every website. The user can access his account using the login form. 

Different types of login forms are used on different websites. I have already shown you many types of designs. In this design, we can do both login and registration in one form. Basically, we create separate forms for login and registration. 

12+ CSS Rain Effect | Simple Rain Animation Effect

But in this case, you can do two types of work in one form. First of all, when you open this login form, there will be a complete interface for login. 

Login and Registration Form [Live Demo]

When you want to register, clicking on the registration button at the top will open the registration page. You can register here with your username, e-mail id, password. This is a simple and beautiful design.

 In this case, I have used Jquery programming code. To activate the menu bar in this login form. If you want to know how this design works then you must check out the demo below.

live Demo:

 

As you can see above, first of all, I used the background blue of the home page and created a nice login form on it. First of all, I created two buttons in the login form. Clicking on which will open the login and registration form. In general, the login form can be seen by clicking on it.

Login and Registration Form in HTML CSS

 In the first login form, I have made two buttons of Facebook and Google so that you can also log in with the help of social media. Below is the space to input the email ID and password.

 Below I have created a login button. To register, click on the registration button on the top. If you click on that button, you will see the registration form. First of all in this form I have made a place to input username e-mail, ID, and password. Then I added a nice button in the same way. I used the Jquery programming code to execute the menu bar. 

If you want the source code to create it, use the download button below. If you want to know how I made it then you must follow the tutorial below step by step. In the following tutorial, I have shown step by step how this login form has been created based on any programming code.

Step 1: Create the structure of the login form

First of all, copy the HTML structure below and add it to your Html file. In this case, you will see that I have added the query and font awesome CDN link in the head section of the HTML structure. 

Of course, you have to put the link between these two in the HTML file. The font awesome link will help to highlight the icons and the jQuery link will help to execute the jQuery script.

<!DOCTYPE html>
<html lang=”en”>
<head>
  <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>
  <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>Document</title>
  <script src=”https://code.jquery.com/jquery-3.6.0.js””></script>
  <style>
 
  </style>
</head>
<body>
  <div class=”wrapper”>
    <div class=”container”>
       
       
 
    </div>
    </div>
 
<script>
 
</script>
 
</body>
</html>

The CSS code below has helped to design the background and add color to the background. In this case, I have used blue color as the background but you can change the color of your choice here. I have used the height of the login form 420px and absolute position.

 @import url(‘https://fonts.googleapis.com/css?family=Josefin+Sans’);
 
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
  list-style: none;
  text-decoration: none;
  font-family: ‘Josefin Sans’, sans-serif;
}
 
body{
  background: #1bb1ec;
}
 
.wrapper{
  max-width: 400px;
  width: 100%;
  height: 440px;
  position: absolute;
  top: 50%;
  left:50%;
  transform: translate(-50%,-50%);
  background: #dde1e7;
  box-shadow: -3px -3px 7px rgba(68, 75, 87, 0.356),
              2px 2px 5px rgba(68, 75, 87, 0.356);
}
 
.container{
  padding: 35px 40px;
}

Step 2: Create a menu bar

As you can see in the demo above, first of all, I used two buttons to open the login and registration page. The HTML and CSS code below helped to create those buttons. You need JavaScript enabled to view it. I have used a 2px border around this menu bar.

35+ Free JavaScript Games(Code+ Demo)

 I kept the background white and used the background blue of the activated menu item. In the case of active items having different colors, you can easily understand which form is active.

 <div class=”tabs”>
          <ul>
            <li class=”sign_in_li”>Sign in</li>
            <li class=”sign_up_li”>Sign up</li>
          </ul>
</div>
.wrapper .tabs ul{
  width: 100%;
   
 
  margin-bottom:30px;
   border: 2px solid #1bb1ec;
  display: flex;
}
    
 
.wrapper .tabs ul li{
  width: 50%;
  padding: 15px 0;
  text-align: center;
  font-size: 14px;
  color: #fefffe;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 2px;
  background: #1bb1ec;
  cursor: pointer;
  position: relative;
  transition: all 0.5s ease;
}
 
.wrapper .tabs ul li.active{
  background: #e3e4e6;
  color: rgb(0, 0, 0);
}

Step 3: Add social media button

I used the following HTML and CSS programming code to add the two social media buttons in everyone’s first login form. I used 45 px from top to bottom using margin-top 45px

I used different colors in the background for two social icons. I used blue for Facebook and purple for Google. As you can see I have used the icon in this case so you must add the CDN link.

  <div class=”sign_in”>
          <div class=”icon-button”> 
            
            <span class=”facebook”><i class=”fa fa-facebook”></i></span>
 
            <span class=”google”><i class=”fa fa-google”></i></span>
  
  
          </div>
           <!–Input Information –>
         
        </div>
.icon-button{
  margin-top: 45px;
}
.icon-button span{
  margin-left: 15px;
  padding-left: 60px;
  padding-right: 60px;
  padding-top: 20px;
  padding-bottom: 7px;
 
 border-radius: 5px;
  line-height: 30px;
  
  background: #b8bec7;
 
   
}
.icon-button span.facebook{
  background: #3498db;
  color: #fbfdff;
}
.icon-button span.google{
  background: #db7f34;
  color: #ffffff;
}
.icon-button span.facebook:hover{
  background: #2172a8;
}
.icon-button span.google:hover{
  background: #be6c29;
}
 
.icon-button span i{
  font-size: 25px;
}

Step 4: Create a place to input email and passwords

The following HTML and CSS codes have helped to make room for inputting email IDs and passwords. I made a nice login button with the background I used blue and 2 px blue color borders. I used the size of the text in the input space as 14px and the color black.

 In this case, I took the background of the button I made and used white color in the text. It has a hove attached to it that will change the background of the button when you move or click the mouse on that button. 

40+ Tailwind Login Form page (Free code + demo)

In this case, let me say that these buttons and input spaces will be valid in all cases, that is, the same will be valid in both the registration form and the login form. This means you don’t have to add CSS code for buttons and input space separately.

    <div class=”input_field”>
            <input type=”text” placeholder=”E-mail” class=”input”>
     </div>
     <div class=”input_field”>
            <input type=”password” placeholder=”Password” class=”input”>
      </div>
      <div class=”btn”><a href=”#”>Sign in</a></div>
 
.wrapper .input_field{
  margin-bottom: 25px;
  margin-top: 28px;
}
 
.wrapper .input_field .input{
  width: 100%;
  border: none;
  background: #dde9ecb7;
  color: black;
  font-family: sans-serif;
  border: 2px solid rgba(13, 162, 231, 0.596);
  font-size: 14px;
  padding: 17px;
  border-radius: 10px;
 
.wrapper .btn{
  margin-top: 30px;
  background: #27a6f0;
 
  padding: 12px;
  text-align: center;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-weight: bold;
}
.wrapper .btn:hover{
 background: #1b8cce;
}
 
.wrapper .btn a{
  color: rgb(255, 255, 255);
  display: block;
  font-size: 16px;
  font-family: sans-serif;
}
 

Step 5: Add the information of Registration Form

The username, e-mail ID, and password input in the registration form and the following code helped to create the registration button. As I said earlier, there is no need to add any CSS code separately.

<div class=”sign_up”>
      <div class=”input_field”>
        <input type=”text” placeholder=”Username” class=”input”>
      </div>
      <div class=”input_field”>
        <input type=”text” placeholder=”E-mail” class=”input”>
      </div>
      <div class=”input_field”>
        <input type=”password” placeholder=”Password” class=”input”>
      </div>
      <div class=”btn”><a href=”#”>Sign up</a></div>
    </div>
 

Step 6: Activate menu bar by adding Jquery code

So far we have only designed it. Now we will implement the two menu buttons at the top. As you saw in the demo above, when you want to open the login form, click on the login button at the top of this form.

 When you want the registration form, you can see the registration form by clicking the registration button. I used the jQuery code to make this thing work.

 $(“.sign_up”).hide();
$(“.sign_in_li”).addClass(“active”);
 
$(“.sign_up_li”).click(function(){
  $(this).addClass(“active”);
  $(“.sign_in_li”).removeClass(“active”);
  $(“.sign_up”).show();
   $(“.sign_in”).hide();
})
 
$(“.sign_in_li”).click(function(){
  $(this).addClass(“active”);
  $(“.sign_up_li”).removeClass(“active”);
  $(“.sign_in”).show();
   $(“.sign_up”).hide();
})

Final Video Output:

Conclusion:

Hope you learned from this tutorial how I created this login and registration form using HTML CSS and JQuery programming code. I have already made many more such designs and you can follow the designs if you want.

Forms are an important part of the websites because they help in collecting data from multiple users at the same time, which helps in analyzing the user’s needs. The forms are also used for the security purposes of the user’s data.

Source Code:

FAQ:

What is a Registration form?

A registration form is a user form data where user needs to create an account on the website for accessing the services by entering a unique username , email address and password for creating a personal space on the website.

What is the use of forms?

The uses of forms are:
1. Collecting data.
2. Enhancing Security.
3. Analysis data.
4. Improving Services.