Login and Registration Form Using HTML CSS JavaScript

From this article, you will learn how to create a Login and Registration Form using HTML CSS, and JavaScript. The login form is a common element for any website. 

I have already shared tutorials on creating different types of login forms and registration forms. But they were different designs. Here I have created those two designs completely together.

We see such registration forms on different websites. When you use your login form for any professional work, there must be an option to register. Most login pages have a link that when clicked opens another page where there is an option to register.

Login and Registration Form in HTML CSS

Here you can log in and register in this element. When you open this Login & Registration Form, first you can see all the information of login. Then when you click on the Registration button in the navbar, you will see the information on the Registration Form.

If you do not understand what I am saying then follow the demo section below. Here I have given a live preview and required source code.

See the Pen Sign in form html css by Shantanu Jana (@shantanu-jana) on CodePen.

As you can see, a box has been created on a black background. First, there are two texts in the box. Those two texts will basically act as select buttons. Under normal circumstances, the first text i.e. login option will be selected.

Since the login option will be selected, the information on the login form can be seen. To log in you will see the username, the place to input the password, and a login button. 

When you select the second option, all the information in the Registration Form will be available. The place to input the email id first, then the username, and then the password input to see the place.

How to Create a Login and Registration Form

Now if you want to create this login and registration form in HTML then you have two options. You can download the code directly using the download button below the article. Or below I have shared a step-by-step tutorial. 

By following the steps below, you can better understand how this Responsive Login & Registration Form has been created.

The basic structure of registration form

Using the code below, I first created the basic structure of the login and registration form. The basic structure is an area in which we can see all the information.

<div class="align">

 <div class="card">

 </div>

</div>

I have done some basic design of webpage using CSS below. Black color has been used in the background here.

* {

box-sizing: border-box;

margin: 0;

padding: 0;

text-decoration: none;

font-family: "Roboto";

outline: none;

border: none;

}

html, body {

height: 100%;

background: #0A0A0A;

}

Now the basic area of ​​this login and registration form has been created. Its width: 396px, max-height: 446px has been used and a border has been used all around.

.align {

height: 100%;

display: flex;

align-items: center;

justify-content: center;

flex-direction: column;

padding-bottom: 8px;

}

.card {

margin-top: 28px;

height: 100%;

max-height: 446px;

width: 396px;

background: #121212;

border: 1px solid #373737;

border-radius: 10px;

overflow: hidden;

transition: max-height 0.2s;

}

Create a select navigation bar

Now the navigation bar has been created which will have two select buttons.

  <div class="head">

    <div></div>

    <a id="login" class="selected" href="#login">Login</a>

    <a id="register" href="#register">Register</a>

    <div></div>

  </div>

.extend {

max-height: 480px;

}

.head {

width: 100%;

display: flex;

height: 72px;

border-bottom: 1px solid #373737;

justify-content: space-between;

}

.head a {

height: 100%;

padding: 0 28px;

display: flex;

align-items: center;

justify-content: center;

color: rgb(140,140,140);

font-size: 20px;

font-weight: 500;

}

Now the select option in this navigation bar has been designed. The option that is selected will change color and an underline will be added below.

.head .selected {

position: relative;

color: #00FF5C;

font-weight: 700;

}

.head .selected:after {

position: absolute;

content: "";

bottom: 0;

left: 0;

height: 5px;

width: 100%;

background: #00FF5C;

border-radius: 99px 99px 0 0;

}

Login and Registration Form Information

Now all the information on the login and registration form has been added in the following HTML section. I have used the HTML input function to create different input boxes and the button function to create buttons.

  <div class="tabs">

    <form>

      <div class="inputs">

<div class="input">

  <input placeholder="Username" type="text">

</div>

<div class="input">

  <input placeholder="Password" type="password">

</div>

<label class="checkbox">

  <input type="checkbox">

  <span>Remember me</span>

</label>

      </div>

      <button>Login</button>

    </form>

    <form>

      <div class="inputs">

<div class="input">

  <input placeholder="Email" type="text">

</div>

<div class="input">

  <input placeholder="Username" type="text">

</div>

<div class="input">

  <input placeholder="Password" type="password">

</div>

      </div>

      <button>Register</button>

    </form>

  </div>

.tabs {

height: calc(100% - 72px);

display: flex;

}

form {

width: 100%;

height: 100%;

flex-shrink: 0;

padding: 44px 38px;

display: flex;

flex-direction: column;

justify-content: space-between;

align-items: center;

position: relative;

right: 0;

transition: right 0.2s;

}

.extend form {

right: 100%;

}

Design the input and login button 

The input spaces are designed using the following CSS. The size of these input boxes depends on the padding: 16px 18px 16px 51px.

.inputs {

width: 100%;

padding-top: 6px;

}

.input {

position: relative;

margin-bottom: 20px;

width: 100%;

display: flex;

align-items: center;

}

.input input {

width: 100%;

font-size: 17px;

background: #1C1C1C;

border-radius: 8px;

padding: 16px 18px 16px 51px;

color: rgb(220,220,220);

}

Now the checkbox option has been designed. Here we see a check box containing the login form. I have used the following CSS to design that option.

.checkbox {

height: 40px;

display: flex;

align-items: center;

position: relative;

cursor: pointer;

}

.checkbox span {

display: flex;

align-items: center;

color: rgb(110,110,110);

font-size: 16px;

user-select: none;

}

.checkbox input {

width: 22px;

height: 22px;

border-radius: 6px;

margin-right: 16px;

background-color: #1C1C1C;

}

Now the button between the HTML login and registration form has been designed. Depending on the green color and size padding in the background of the button: 14px 52px.

.card button {

display: block;

background: #00FF5C;

padding: 14px 52px;

border-radius: 12px;

color: #003B15;

font-weight: 700;

font-size: 21px;

cursor: pointer;

}

Activate the Login and Registration form

Now the design of this simple login and registration form is complete. However, the select option here is not implemented now.

In effect, when you click on the registration button, you will see all the information in the registration form and all the information in the login form will be hidden. I did this using a few jQuery.

$(window).on("hashchange", function(){

if(location.hash.slice(1)=="register"){

$(".card").addClass("extend");

$("#login").removeClass("selected");

$("#register").addClass("selected");

} else {

$(".card").removeClass("extend");

$("#login").addClass("selected");

$("#register").removeClass("selected");

}

});

$(window).trigger("hashchange");

I hope you have been able to create this login and registration form in HTML using the above code. If there is any problem then you must comment. 

In the meantime, I have shared the designs of different types of registration forms and login forms separately. Use the button below for the source code to create this registration form.

The download will start automatically