Telegram Group Join Now

Dear programmers!! In this tutorial, we’ll demonstrate how to make a Login and Registration Form in HTML and CSS With Source Code. If you haven’t seen the popup login form that we’ve learned click the link below.

Create Popup Registration Form Using HTML & JavaScript

Login and Registration Form in HTML and CSS

A basic understanding of HTML forms is all that is needed for this beginner-level project. We will discuss our project step by step even if you don’t have a concept yet. In this project you can registration and login on the same form. It is controlled by two different buttons. The login form is displayed when you click the login button. The signup form is opened by clicking the register button. It is turned on thanks to the HTML checkbox.

First name, last name, email, password, and other information must be entered on the registration form. Only the email address and password are required to be entered on the login page.

50+ HTML, CSS & JavaScript Projects With Source Code

Let’s have a quick look at our project.

Login and Registration Form Using HTML & CSS — Login and Registration Form

I hope you must have got an idea about the project.

So, let’s get started on the Signup & Login form Project source codes. First, we’re going to use HTML Code.

Step1:HTML Code

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css" />
  <title>Form</title>
</head>

<body>
  <div class="login-wrap">
    <div class="login-html">
      <input id="tab-1" type="radio" name="tab" class="sign-in" checked><label for="tab-1" class="tab">Sign In</label>
      <input id="tab-2" type="radio" name="tab" class="sign-up"><label for="tab-2" class="tab">Sign Up</label>
      <div class="login-form">
        <div class="sign-in-htm">
          <div class="group">
            <label for="user" class="label">Username</label>
            <input id="user" type="text" class="input">
          </div>
          <div class="group">
            <label for="pass" class="label">Password</label>
            <input id="pass" type="password" class="input" data-type="password">
          </div>
          <div class="group">
            <input id="check" type="checkbox" class="check" checked>
            <label for="check"><span class="icon"></span> Keep me Signed in</label>
          </div>
          <div class="group">
            <input type="submit" class="button" value="Sign In">
          </div>
          <div class="hr"></div>
          <div class="foot-lnk">
            <a href="#forgot">Forgot Password?</a>
          </div>
        </div>
        <div class="sign-up-htm">
          <div class="group">
            <label for="user" class="label">Username</label>
            <input id="user" type="text" class="input">
          </div>
          <div class="group">
            <label for="pass" class="label">Password</label>
            <input id="pass" type="password" class="input" data-type="password">
          </div>
          <div class="group">
            <label for="pass" class="label">Repeat Password</label>
            <input id="pass" type="password" class="input" data-type="password">
          </div>
          <div class="group">
            <label for="pass" class="label">Email Address</label>
            <input id="pass" type="text" class="input">
          </div>
          <div class="group">
            <input type="submit" class="button" value="Sign Up">
          </div>
          <div class="hr"></div>
          <div class="foot-lnk">
            <label for="tab-1">Already Member?</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

The information for the registration and login forms has been added to the HTML code in the sections below. The codes listed below are copied, and they are then added directly to your HTML file.

To start, we’ll add a “login-wrap” class to a div tag, which will wrap our signup and login forms.
Now that we have created an input box with the type “radio,” we can use the radio button to switch between the signup and signin forms.
We will now create our login form. To do that, we will design a label that requests a username and, beneath it, a text-only input box for the username.
We’re going to make a “password” input box now, along with a “checkbox” input box that says “keep me logged in.”
Now using <hr> tag we will make a horizontal rule to which we used to divide our form
Now we will created a forgot password link using the anchor tag.

Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)

Let’s look at our login form now that we have created it.

Now we will be creating the structure of our signup form . Using the div tag we will create a container for our singup form.
First, we’ll construct a label for our username and an input type for the username called “text.”Then, two input fields of the type “password” will be created.
A label asking for the user’s email address will now be created, along with an input box with the type “email” address.
we build an input type that serves as a button for signing them up. If the user has already registered on another website, we also create a link for our login page.

Let’s look at our SignUp form now that we have created it.

Restaurant Website Using HTML And CSS With Source Code

So we have added the HTML tags and Their contents, Now it’s time to make it attractive by adding the CSS code.

Before we can style our page, we must add external styling links to the head section of our html.

<link rel="stylesheet" href="styles.css" />

Step2: CSS code

body {
  margin: 0;
  color: #6a6f8c;
  background: #c8c8c8;
  font: 600 16px/18px "Open Sans", sans-serif;

}
*,
:after,
:before {
  box-sizing: border-box;
}
.clearfix:after,
.clearfix:before {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
  display: block;
}
a {
  color: inherit;
  text-decoration: none;
}

.login-wrap {
  width: 100%;
  margin: auto;
  max-width: 525px;
  min-height: 670px;
  position: relative;
  background: url(https://raw.githubusercontent.com/khadkamhn/day-01-login-form/master/img/bg.jpg)
    no-repeat center;
  box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24),
    0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
.login-html {
  width: 100%;
  height: 100%;
  position: absolute;
  padding: 90px 70px 50px 70px;
  background: rgba(40, 57, 101, 0.9);
}
.login-html .sign-in-htm,
.login-html .sign-up-htm {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  transform: rotateY(180deg);
  backface-visibility: hidden;
  transition: all 0.4s linear;
}
.login-html .sign-in,
.login-html .sign-up,
.login-form .group .check {
  display: none;
}
.login-html .tab,
.login-form .group .label,
.login-form .group .button {
  text-transform: uppercase;
}
.login-html .tab {
  font-size: 22px;
  margin-right: 15px;
  cursor: pointer;
  padding-bottom: 5px;
  margin: 0 15px 10px 0;
  display: inline-block;
  border-bottom: 2px solid transparent;
}
.login-html .sign-in:checked + .tab,
.login-html .sign-up:checked + .tab {
  color: #fff;
  border-color: #1161ee;
  cursor: pointer;
}
.login-form {
  min-height: 345px;
  position: relative;
  perspective: 1000px;
  transform-style: preserve-3d;
}
.login-form .group {
  margin-bottom: 15px;
}
.login-form .group .label,
.login-form .group .input,
.login-form .group .button {
  width: 100%;
  color: #fff;
  display: block;
}
.login-form .group .input,
.login-form .group .button {
  border: none;
  padding: 15px 20px;
  border-radius: 25px;
  background: rgba(255, 255, 255, 0.1);
}
.login-form .group input[data-type="password"] {
  -webkit-text-security: circle;
}
.login-form .group .label {
  color: #aaa;
  font-size: 12px;
}
.login-form .group .button {
  background: #1161ee;
  cursor: pointer;
}
.login-form .group .button:hover {
    background:#1454c4;
    cursor: pointer;
  }
.login-form .group label .icon {
  width: 15px;
  height: 15px;
  border-radius: 2px;
  position: relative;
  display: inline-block;
  background: rgba(255, 255, 255, 0.1);
}
.login-form .group label .icon:before,
.login-form .group label .icon:after {
  content: "";
  width: 10px;
  height: 2px;
  background: #fff;
  position: absolute;
  transition: all 0.2s ease-in-out 0s;
}
.login-form .group label .icon:before {
  left: 3px;
  width: 5px;
  bottom: 6px;
  transform: scale(0) rotate(0);
}
.login-form .group label .icon:after {
  top: 6px;
  right: 0;
  transform: scale(0) rotate(0);
}
.login-form .group .check:checked + label {
  color: #fff;
}
.login-form .group .check:checked + label .icon {
  background: #1161ee;
}
.login-form .group .check:checked + label .icon:before {
  transform: scale(1) rotate(45deg);
}
.login-form .group .check:checked + label .icon:after {
  transform: scale(1) rotate(-45deg);
}
.login-html
  .sign-in:checked
  + .tab
  + .sign-up
  + .tab
  + .login-form
  .sign-in-htm {
  transform: rotate(0);
}
.login-html .sign-up:checked + .tab + .login-form .sign-up-htm {
  transform: rotate(0);
}

.hr {
  height: 2px;
  margin: 60px 0 50px 0;
  background: rgba(255, 255, 255, 0.2);
}
.foot-lnk {
  text-align: center;
}

Now that we’ve included our CSS code in our article, let’s go over it step by step.

Step1: We’ve now set the margin and padding on our webpage to “zero” using the body tag. “Open Sans” is the family of fonts. “Light Grey” is the backdrop colour setting. The font size was also changed to “dark-grey.”

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

Using the universal selector (*) we will set the box-sizing of our webpage as “border-box”.

If any of the items overflow, the clearfix attribute will cause them to be automatically set to the height.

body {
  margin: 0;
  color: #6a6f8c;
  background: #c8c8c8;
  font: 600 16px/18px "Open Sans", sans-serif;

}
*,
:after,
:before {
  box-sizing: border-box;
}
.clearfix:after,
.clearfix:before {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
  display: block;
}

Step2: We will now set its width to “100%” using the (.login-wrap) class. The margin is set to auto, meaning that it will change depending on the content. Additionally, we specified “525 px” for the maximum width and “670 px” for the minimum height. In order to give our login form a little more flair, we also include a backdrop image.

How To Create Movie App UI Using HTML & CSS

In order to style our login form, we will use the “.login-html” class. We have set the width to “100%” and the position to absolute. Additionally, we added additional space and made the backdrop of our login form a dark blue colour.

.login-wrap {
  width: 100%;
  margin: auto;
  max-width: 525px;
  min-height: 670px;
  position: relative;
  background: url(https://raw.githubusercontent.com/khadkamhn/day-01-login-form/master/img/bg.jpg)
    no-repeat center;
  box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24),
    0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
.login-html {
  width: 100%;
  height: 100%;
  position: absolute;
  padding: 90px 70px 50px 70px;
  background: rgba(40, 57, 101, 0.9);
}

Step3:We will set the top, left, right, and bottom space to “zero” and the position to “absolute” using the (.sign-in-htm and.sign-up-htm) files. Our login and signup forms will be rotated 180 degrees by adding some transform properties.

We’ll now style the sign-in button. The font size was set to “22 px,” the margin to the right was set to “15 px,” the cursor was set to “pointer,” and the padding to the bottom was set to “5 px.” Additionally, we gave our button a 2-px bottom border.

In the similar way we will style our signup form . you will easily understand the code just go through our css code once.

.login-html .tab {
  font-size: 22px;
  margin-right: 15px;
  cursor: pointer;
  padding-bottom: 5px;
  margin: 0 15px 10px 0;
  display: inline-block;
  border-bottom: 2px solid transparent;
}
.login-html .sign-in:checked + .tab,
.login-html .sign-up:checked + .tab {
  color: #fff;
  border-color: #1161ee;
  cursor: pointer;
}
.login-form {
  min-height: 345px;
  position: relative;
  perspective: 1000px;
  transform-style: preserve-3d;
}
.login-form .group {
  margin-bottom: 15px;
}
.login-form .group .label,
.login-form .group .input,
.login-form .group .button {
  width: 100%;
  color: #fff;
  display: block;
}
.login-form .group .input,
.login-form .group .button {
  border: none;
  padding: 15px 20px;
  border-radius: 25px;
  background: rgba(255, 255, 255, 0.1);
}
.login-form .group input[data-type="password"] {
  -webkit-text-security: circle;
}
.login-form .group .label {
  color: #aaa;
  font-size: 12px;
}
.login-form .group .button {
  background: #1161ee;
  cursor: pointer;
}
.login-form .group .button:hover {
    background:#1454c4;
    cursor: pointer;
  }
.login-form .group label .icon {
  width: 15px;
  height: 15px;
  border-radius: 2px;
  position: relative;
  display: inline-block;
  background: rgba(255, 255, 255, 0.1);
}
.login-form .group label .icon:before,
.login-form .group label .icon:after {
  content: "";
  width: 10px;
  height: 2px;
  background: #fff;
  position: absolute;
  transition: all 0.2s ease-in-out 0s;
}
.login-form .group label .icon:before {
  left: 3px;
  width: 5px;
  bottom: 6px;
  transform: scale(0) rotate(0);
}
.login-form .group label .icon:after {
  top: 6px;
  right: 0;
  transform: scale(0) rotate(0);
}

Step4:Now, we will switch between our sign-in and sign-up forms utilising the checked attribute. Now, utilising the checked property, if we select the signup button, it will display a blue border along the bottom, and if you select signin, the checked property signin form will appear.

Weather App Using Html,Css And JavaScript

.login-form .group .check:checked + label {
  color: #fff;
}
.login-form .group .check:checked + label .icon {
  background: #1161ee;
}
.login-form .group .check:checked + label .icon:before {
  transform: scale(1) rotate(45deg);
}
.login-form .group .check:checked + label .icon:after {
  transform: scale(1) rotate(-45deg);
}
.login-html
  .sign-in:checked
  + .tab
  + .sign-up
  + .tab
  + .login-form
  .sign-in-htm {
  transform: rotate(0);
}
.login-html .sign-up:checked + .tab + .login-form .sign-up-htm {
  transform: rotate(0);
}

Let’s take a look at our final output now that we’ve styled our popup login form.

Output:

The project is now finished, we have completed Popup Login form using HTML and CSS. Now look at the live preview.

Output:

Codepen Preview Of Login and Registration Form Using HTML & CSS

<br /> See the Pen <a href="https://codepen.io/arun020/pen/yLjjNdq" rel="nofollow noopener" target="_blank"><br /> Login Form/Sign Up Registration Form</a> by Arun (<a href="https://codepen.io/arun020" rel="nofollow noopener" target="_blank">@arun020</a>)<br /> on <a href="https://codepen.io" rel="nofollow noopener" target="_blank">CodePen</a>.<br />
Now We have Successfully created the Login and Registration Form using HTML and CSS . You can use this project directly by copying into your IDE. WE hope you understood the project , If you any doubt feel free to comment!!

If you find out this Blog helpful, then make sure to search code with random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

follow : @codewithrandom

Written By : @arun

Code by : @Arun

Login and Registration Form in HTML & CSS With Source Code

Telegram Group Join Now

Login and Registration Form in HTML and CSS

Step1:HTML Code

Step2: CSS code

Codepen Preview Of Login and Registration Form Using HTML & CSS

Telegram Group Join Now

Leave a Reply Cancel reply

Quick Intro!!

Navigate

Subscribe Now

Designed & Maintained By Sahitya Porwal 🔥

Thanks For Visiting CodeWithRandom

Telegram Group Join Now

Login and Registration Form in HTML and CSS

Step1:HTML Code

Step2: CSS code

Codepen Preview Of Login and Registration Form Using HTML & CSS

Telegram Group Join Now

You Might Also Like

15+ jQuery Toggle Switches

Animated Login Form using HTML and CSS

Digital Clock Using HTML & JavaScript (Source Code)

Leave a Reply Cancel reply

Quick Intro!!

Navigate

Subscribe Now

Designed & Maintained By Sahitya Porwal 🔥

Thanks For Visiting CodeWithRandom