Form, Login Form, SignUp Form

Signup form HTML code | Login form html template

Hello everyone, in this post, we will learn how to create a login and signup form using HTML and CSS. In the last lecture, we discussed how to create an Html landing page template free | Landing page CSS. But today we will develop a signup and login form using HTML and CSS and for creating this type of form you have to follow the below steps.

This form has two sections login and signup section. For entering into the website you have to create an account on the website and it will be created with the help of the sign-up form. For creating the account on the website we have created a signup form and you have to use this form for registering yourself on the website. In this form, we have a heading at the top and then we have some fields and these fields collect the username, Email, and password of the user. After putting all the information in the fields then you have to click the sign-up button and your account will be created.

You might like it:

If you have an account on the website then you have to log in with the help of a login form but if you don’t have an account on the website then you have to create your account with the help of the signup form. In this case, we have an account and for logging into the website we have to use the login form. In this login form, we have a heading at the top of the form and then we have two fields Email and password. After entering your information in fields then you have to click a login button.

Colour, Fonts, and input fields:

For creating this signup and login form we have used Html and CSS only. Button and content are created with the help of HTML. On the other hand for the designing purpose, we have used CSS. We have to use the background color, font family, font size, shadow, box, radius, input field, and the design created using CSS. If you want to learn how to create this type of login and Sign up form using Html and CSS then follow the below steps.

This Login and signup form will be created in three major steps. You have to follow these steps to create this type of form.

Download code editor:

Accord editor is an environment that helps the developer to write the code. code editor to save time and write the code without Syntax errors. you can use sublime text Marvel Studio code are creating this form.

Html source code

After downloading the code editor you have to create a file in the code editor with the name of the form.Html. And don’t forget to save an HTML file without an extension. HTML. The source code is given below and you can use this code for creating your form.

<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Login and Signup Form  - FantacyDesigns</title>
	<link rel="stylesheet" href="style.css">
	<link rel="JavaSctipt" href="script.js">
	<link href="https://fonts.googleapis.com/css2?family=Jost:wght@500&display=swap" rel="stylesheet">
</head>

<body>

	<div class="main">  	
		<input type="checkbox" id="chk" aria-hidden="true">

			<div class="signup">
				<form>
					<label for="chk" aria-hidden="true">Sign up</label>
					<input type="text" name="txt" placeholder="User name" required="">
					<input type="email" name="email" placeholder="Email" required="">
					<input type="password" name="pswd" placeholder="Password" required="">
					<button>Sign up</button>
				</form>
			</div>

			<div class="login">
				<form>
					<label for="chk" aria-hidden="true">Login</label>
					<input type="email" name="email" placeholder="Email" required="">
					<input type="password" name="pswd" placeholder="Password" required="">
					<button>Login</button>
				</form>
			</div>
	</div>
</body>
</html>

<!Doctype html>

<html>

<head>

<title>Login and Signup Form - FantacyDesigns</title>

</head>

<body>

<form>

</form>

</div>

<form>

<label for="chk" aria-hidden="true">Login</label>

<button>Login</button>

</form>

</div>

</body>

</html>

Source code of CSS

Buttons, fonts, color, shadow, radius, and all these things are designed and developed with the help of CSS. CSS source code is given below and you have to paste this code into your newly created CSS file.

body{
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  font-family: 'Jost', sans-serif;

  background-image: linear-gradient(to bottom, #302b62, #36387a, #394693, #3855ac, #3264c7, #3264c7, #3264c7, #3264c7, #3855ac, #394693, #36387a, #302b62);


}
.main{
  width: 350px;
  height: 500px;
  background: red;
  overflow: hidden;
  background: url("https://doc-08-2c-docs.googleusercontent.com/docs/securesc/68c90smiglihng9534mvqmq1946dmis5/fo0picsp1nhiucmc0l25s29respgpr4j/1631524275000/03522360960922298374/03522360960922298374/1Sx0jhdpEpnNIydS4rnN4kHSJtU1EyWka?e=view&authuser=0&nonce=gcrocepgbb17m&user=03522360960922298374&hash=tfhgbs86ka6divo3llbvp93mg4csvb38") no-repeat center/ cover;
  border-radius: 10px;
  box-shadow: 5px 20px 50px #000;
     background: rgba( 255, 255, 255, 0.10 );
            box-shadow: 0px 10px 50px 0 rgb(31 38 135 / 20%);
            /* CHANGE THIS TO CHANGE THE BLUR AMOUNT */
            backdrop-filter: blur( 8.0px );
            -webkit-backdrop-filter: blur( 8.0px );
            border-radius: 10px;
            border: 1px solid rgb(255 255 255 / 15%);
                 text-align: center;
}
#chk{
  display: none;
}
.signup{
  position: relative;
  width:100%;
  height: 100%;
}
label{
  color: #fff;
  font-size: 2.3em;
  justify-content: center;
  display: flex;
  margin: 60px;
  font-weight: bold;
  cursor: pointer;
  transition: .5s ease-in-out;
}
input{
  width: 60%;
  height: 20px;
  background: #e0dede;
  justify-content: center;
  display: flex;
  margin: 20px auto;
  padding: 10px;
  border: none;
  outline: none;
  border-radius: 5px;
}
button{
  width: 60%;
  height: 40px;
  margin: 10px auto;
  justify-content: center;
  display: block;
  color: #fff;
  background: #312E67;
  font-size: 1em;
  font-weight: bold;
  margin-top: 20px;
  outline: none;
  border: none;
  border-radius: 5px;
  transition: .2s ease-in;
  cursor: pointer;
}
button:hover{
  background: #005DC0;
}
.login{
  height: 460px;
  background: #eee;
  border-radius: 60% / 10%;
  transform: translateY(-180px);
  transition: .8s ease-in-out;
  
}
.login label{
  color: #573b8a;
  transform: scale(.6);
}

#chk:checked ~ .login{
  transform: translateY(-500px);
}
#chk:checked ~ .login label{
  transform: scale(1);  
}
#chk:checked ~ .signup label{
  transform: scale(.6);
}

100

101

102

body{

margin: 0;

padding: 0;

display: flex;

justify-content: center;

align-items: center;

min-height: 100vh;

font-family: 'Jost', sans-serif;

background-image: linear-gradient(to bottom, #302b62, #36387a, #394693, #3855ac, #3264c7, #3264c7, #3264c7, #3264c7, #3855ac, #394693, #36387a, #302b62);

}

.main{

width: 350px;

height: 500px;

background: red;

overflow: hidden;

background: url("https://doc-08-2c-docs.googleusercontent.com/docs/securesc/68c90smiglihng9534mvqmq1946dmis5/fo0picsp1nhiucmc0l25s29respgpr4j/1631524275000/03522360960922298374/03522360960922298374/1Sx0jhdpEpnNIydS4rnN4kHSJtU1EyWka?e=view&authuser=0&nonce=gcrocepgbb17m&user=03522360960922298374&hash=tfhgbs86ka6divo3llbvp93mg4csvb38") no-repeat center/ cover;

border-radius: 10px;

box-shadow: 5px 20px 50px #000;

background: rgba( 255, 255, 255, 0.10 );

box-shadow: 0px 10px 50px 0 rgb(31 38 135 / 20%);

/* CHANGE THIS TO CHANGE THE BLUR AMOUNT */

backdrop-filter: blur( 8.0px );

-webkit-backdrop-filter: blur( 8.0px );

border-radius: 10px;

border: 1px solid rgb(255 255 255 / 15%);

text-align: center;

}

#chk{

display: none;

}

.signup{

position: relative;

width:100%;

height: 100%;

}

label{

color: #fff;

font-size: 2.3em;

justify-content: center;

display: flex;

margin: 60px;

font-weight: bold;

cursor: pointer;

transition: .5s ease-in-out;

}

input{

width: 60%;

height: 20px;

background: #e0dede;

justify-content: center;

display: flex;

margin: 20px auto;

padding: 10px;

border: none;

outline: none;

border-radius: 5px;

}

button{

width: 60%;

height: 40px;

margin: 10px auto;

justify-content: center;

display: block;

color: #fff;

background: #312E67;

font-size: 1em;

font-weight: bold;

margin-top: 20px;

outline: none;

border: none;

border-radius: 5px;

transition: .2s ease-in;

cursor: pointer;

}

button:hover{

background: #005DC0;

}

.login{

height: 460px;

background: #eee;

border-radius: 60% / 10%;

transform: translateY(-180px);

transition: .8s ease-in-out;

}

.login label{

color: #573b8a;

transform: scale(.6);

}

#chk:checked ~ .login{

transform: translateY(-500px);

}

#chk:checked ~ .login label{

transform: scale(1);

}

#chk:checked ~ .signup label{

transform: scale(.6);

}

If you don’t know how to connect these files with each other then we have created a file. In this file, we have both the files Html and CSS. These files are connected with each other. Just download the below file from the source code button and then extract the files from the .zip file.

Task:

As you can observe that we have both sign-in and sign-up forms and they are developed using HTML and CSS. Now add some extra features to them. Add form validation in the input fields So, that no one can press the login or sign-up button without filling in the required input fields. They change the color of the form and background as well. Text color is also changeable related to the background color.

I hope it was a helpful post for you and you have learned a lot from this article. If so, then don’t forget to like and share this post. Because it will help us to create such type of more and more content.

Thanks for reading this article.

Go to top

Download Source CodeClick to Download