Login formTutorials
Trending

Sign in form html

Sign in form html

October 27, 2020
2 2,638 3 minutes read
Sign in form html

Create a Sign in and Sign up form html

Before We Start

Sign in form html. A login is the security of a system which is a set of credentials used to authenticate the users. Most often, these consist of some form of “username” and a matching “password”, and they are used to prevent unauthorized access to confidential data.

In a website the users can enter their own username and password and can check those by using validations which is correct or wrong and if it is wrong, users can identify which part has the problem, the username or the password.

In a website the login section is an important part and it helps the users to keep the trust on their account and data. So if you are a person who wishes to develop a website, you have to know how to create a login part properly. We are here to solve your problem.

However in this article you are going to learn, how to develop a full featured login page front end part of a website.

Before we start please read the below articles which easier you to understand the process, if you are new to development.

Step 1 – Add HTML

It’s too easy and simple. Just copy and paste below code in your HTML editor between <body> </body> tag.

<html>
<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>

Step 2 – Add CSS

We use some external CSS link to this code. No need to worry about this, copy and paste below code between <head></head> tag.

<head>
<link rel="stylesheet" type="text/css" https:"//fonts.googleapis.com/css?family=Open+Sans:600" />
</head>

Copy and paste below code in your HTML editor between <style></style> tag.

<style>

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://fsa.zobj.net/crop.php?r=6OCCsAlEiZSVIEOnAiHkm2n9mc5MpA3XHw8E8NUSySVPylahm-IyF8Pat9t4qF312J24guq-cZq2g4sWPpk1XIdbqu7nUIX-JCckLc02QCeg84JGAuqZhfC-AyzbjeJUxXoMcjGxjH0nU3d1) no-repeat center;
	box-shadow:0 12px 15px 0 rgba(0,0,0,.24),0 17px 50px 0 rgba(0,0,0,.19);
}
.login-html{
	width:100%;
	height:100%;
	position:absolute;
	padding:90px 70px 50px 70px;
	background:rgba(40,57,101,.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 .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;
	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;
}
.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,.1);
}
.login-form .group input[data-type="password"]{
	text-security:circle;
	-webkit-text-security:circle;
}
.login-form .group .label{
	color:#aaa;
	font-size:12px;
}
.login-form .group .button{
	background:#1161ee;
}
.login-form .group label .icon{
	width:15px;
	height:15px;
	border-radius:2px;
	position:relative;
	display:inline-block;
	background:rgba(255,255,255,.1);
}
.login-form .group label .icon:before,
.login-form .group label .icon:after{
	content:'';
	width:10px;
	height:2px;
	background:#fff;
	position:absolute;
	transition:all .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,.2);
}
.foot-lnk{
	text-align:center;
}
</style>

At the end we will have something like this. You can change fonts, colors, backgrounds and all things that you want. Enjoy it.

Sign in form html

Video Tutorial

Please watch this video to better understand this tutorial and don’t forget to subscribe to our channel.

Help others to find out about this article on Social Media sites. If you have any doubt or any problem, don’t hesitate to contact us. Thereafter we will be able to help you and also make sure you bookmark our site on your browser.

October 27, 2020
2 2,638 3 minutes read

Related Articles

Photo of Animated Buttons Pure CSS

Animated Buttons Pure CSS

October 27, 2023
Photo of Animated Toggle Buttons Pure CSS

Animated Toggle Buttons Pure CSS

October 27, 2023
Photo of Toggle Buttons Animations Pure CSS

Toggle Buttons Animations Pure CSS

October 25, 2023
Photo of Radio Buttons with Images Pure CSS

Radio Buttons with Images Pure CSS

October 25, 2023

2 Comments

  1. This course provides good start for learning web development. I understand the front end basic concepts in such an interesting manner. Great work. I would love to learn more technologies from you. Thanks

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button