How to Implement Login Form Using CSS and HTML
In this tutorial we will implement login form using css and html. There is nothing complicated when comes to logins forms because there are few elements involved in such a html structure. Usually, in order to to a login form from scract you only need two inputs one email or text (if you want to login users with their username) and the second one is for password, which is other type of input and a submit button. All those inputs must go between <form></form> tags, because only using form tag you will be able to send the information to the server, that's what the <form> tags does, it send the informations to the server. You can see how the form will look like in the bottom video.
Implement Login Form
In order to implement our form we will first create our HTML structure. As I said before we don't need many html elements, only few. Take a look to the following HTML structure:
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="login">
<h2 class="active">sign in</h2>
<h2 class="nonactive">sin up</h2>
<form>
<input type="text" class="text" name="username" autocomplete="off">
<span>username</span>
<br><br>
<input type="password" class="text" name="password">
<span>password</span><br>
<input type="checkbox" id="checkbox-1-1" class="custom-checkbox" autocomplete="off">
<label for="checkbox-1-1">Keep me Signed in</label>
<button class="signin">Sign in</button>
<hr>
<a href="#">Forgot password?</a>
</form>
</div>
</body>
</html>
You can remove the autocomplete="off" parameter, I setted for the animation. As you can see we have two inputs one type="text" and the second one type="password" - meaning the text inside the input won't be seen.
Now, in order to make our form look nice we will add few lines of css.
body,
.signin{
background-color: #d3d3d3;
font-family: 'Montserrat';
color:#fff;
font-size: 14px;
letter-spacing: 1px;
}
.login{
position: relative;
height: 560px;
max-width: 405px;
width: 100%;
margin:auto;
padding:60px;
background-image:url('../images/1004-5616x3744.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position:center center;
box-shadow: 0px 30px 60px -5px #000;
}
form{
padding-top:80px;
}
.active{
border-bottom:2px solid #1161ed;
}
.nonactive{
color:rgba(255,255,255,0.2);
}
h2{
padding-left: 12px;
font-size: 22px;
text-transform: uppercase;
padding-bottom: 5px;
letter-spacing: 2px;
display: inline-block;
font-weight: 100;
}
h2:first-child{
padding-left: 0;
}
span{
text-transform: uppercase;
font-size: 12px;
opacity: 0.4;
display: inline-block;
position: relative;
top:-65px;
transition: all 0.5s ease-in-out;
}
.text{
border:none;
width: 89%;
padding:10px 20px;
display:block;
height:15px;
border-radius: 20px;
background:rgba(255,255,255,0.1);
border:2px solid rgba(255,255,255,0);
overflow: hidden;
transition: all 0.5s ease-in-out;
}
.text:focus{
outline:0;
border:2px solid rgba(255,255,255,0.5);
border-radius: 20px;
background:rgba(0,0,0,0);
}
.text:focus + span{
opacity: 0.6;
}
input[type="text"],
input[type="password"]{
color:#fff;
display:inline-block;
font-size:14px;
}
h2,
span,
.custom-checkbox{
margin-left:20px;
}
.custom-checkbox{
-webkit-appearance:none;
background-color:rgba(255,255,255,0.1);
padding:8px;
border-radius: 2px;
display:inline-block;
position:relative;
top:6px;
}
.custom-checkbox:checked{
background-color:rgba(17,97,237,1);
}
.custom-checkbox:focus{
outline:none;
}
label{
display:inline-block;
padding-top:10px;
padding-left:5px;
}
.signin{
background-color: #1161ed;
color:#fff;
width:100%;
padding:10px 20px;
display: block;
height: 39px;
border-radius: 20px;
margin-top: 30px;
transition:all 0.5s ease-in-out;
border:0 none;
text-transform: uppercase;
}
.signin:hover{
background:#4082f5;
box-shadow:0px 4px 35px -5px #4082f5;
cursor: pointer;
}
.signin:focus{
outline:none;
}
hr{
border:1px solid rgba(255,255,255,0.1);
top:85px;
position:relative;
}
a{
text-align: center;
display: block;
top:120px;
position: relative;
text-decoration: none;
color:rgba(255,255,255,0.2);
}
You can change the image with any other image you want. Let me know in the comments section if you need any help with this implementation.