IMG-LOGO

How to create login form template using HTML5 and CSS3?

andy - 07 Feb, 2018 3389 Views 0 Comment

In this tutorial, you will learn how to create a login form template using HTML5 and CSS3. The concept of our login box will be placed centrally on a page. It will basically have an email and password fields for users to enter their login information and also links to request password just in case they forgot their login credentials and option to create an account. We will make the login box as responsive for screen size that is less than 640px and 320px.

I will explain step by step on how to create the login form template. The first thing we need to do is to create a HTML 5 login box and here is the source code of our login box.

<div class="login-box">
	<form>
		<div class="heading-title">Login to my site</div>
		<label>Email Address:</label>
		<input type="text" placeholder="email@example.com" id="txtEmail"/>
		<label>Password:</label>
		<input type="password" id="txtPassword"/>
		<button id="btnLogin" class='button'>Login</button>
		<div class="m-top"><a href="#">Forgot Password?</a></div>
		<div class="m-top">Don't have an account? <a href="#">Create account</a></div>

	</form>
</div>

The next step is to style our login box. I will explain step by step on the css3 part, as this is actually the important part of our code that builds the look and feel of our login box.

By default a body HTML5 will contains a default padding and margin value. Therefore we have to clear those default values by specifying the following CSS. Note: I also specify the font that we are going to use and the default size which is 13px that is going to apply to whole content of the body.

body{
	margin:0;
	padding:0;
	font-family:"Trebuchet MS";
	font-size:13px;
}

Because we want to center our login box, we need to set the position to absolute of its parent which is the body document. We set the left to 50% and top to 50%. this will ensure the position is located exactly in the center of the page. We then need to set the width and height of our login box. In this case, I have set the width to 400px and the height to 300px. We then need to perform a margin-negative which is the half value of our width and height dimension size. So the margin to the left will be -200px and margin to the top will be -150px. This logic will apply to any div element or box element you want to center in a page. Let says if you want to have a div box with size dimension 800px (width) and 400px (height), you just need to divide the value to 2 which end up to -400px and -200px. To make the login looks good we add some background color and set the border-radius to 10px. We also add some padding into our login box so it will be wrapped some space around it. If you are completely new to CSS, I would recommend you to read my basic CSS2 tutorial first by clicking into this link.

.login-box{
	width:400px;
	height:300px;
	position:absolute;
	left:50%;
	top:50%;
	z-index:100;
	margin-left:-200px;
	margin-top:-150px;
	background-color:#e4f5fa;
	box-sizing:border-box;
	border-radius:10px;
	border:solid 1px #e1dedd;
	padding:20px;
}

The next part is to style our heading title of the login box. This one will be pretty simple, we just set the font size to 20px and I want to make the title as bold and align the title to the center of the login box. We also need to set the space margin-bottom to 20px, so the title and label of the email will not close each other.

.heading-title{
	font-size:20px;
	font-weight:bold;
	text-align:center;
	margin-bottom:20px;
}

We then need to style our label text. By default, the label has an inline display mode which needs to be corrected in our case. By setting the display to block, it will ensure the label take the maximum width space which will force the next element to be displayed underneath.

.login-box label{
	display:block;
	margin-bottom:5px;
}

The concept of display block need to be applied to the input field email and password as well. The only thing we need to add in here is to set the width of our input to 100%.

.login-box input[type='text'], .login-box input[type='password']{
	display:block;
	margin-bottom:10px;
	width:100%;
	box-sizing:border-box;
	padding:10px;
	border-radius:2px;
	border:solid 1px #efeeed;
}

Styling our button will be quite easy and here is the full css3 code for it.

.button{
	display: inline-block;
	height: 30px;
	padding: 0 30px;
	color: #fff;
	background-color: #1eaedb;
	border-color: #1eaedb;
	line-height: 30px;
	letter-spacing: .1rem;
	text-transform: uppercase;
	border-radius: 4px;
	border: 1px solid #bbb;
	cursor: pointer;
	box-sizing: border-box;
}

This is just an extra css property that will add extra 10px margin to the top an element.

.m-top{
	margin-top:10px;
}

As we want to make our login box responsive, we cater for some specific widths for mobile view. In this style, we target for any screen that has a max width of 480px. We set the position of our login box to relative and we remove all the left and top properties. By removing those options, our login box will position back to a normal position which is on the left of the page. But do not worry, as we need to center it on the page, we can just use the CSS properties margin:0 auto to force it to the center. We then need to set the max width of our login box to 320px and put a margin 30px to top.

@media only screen and (max-width: 480px) {
	.login-box {
		position: relative;
		left: 0;
		top: 0;
		max-width: 320px;
		margin: 0 auto;
		margin-top:30px;
	}
}

The last part we need to do is to do is to change the width of our login box if the maximum screen view size is 320px.

Download

Demo

If you want to see the demo of login form template, please click it here.

@media only screen and (max-width: 320px) {
	.login-box {
		max-width: 240px;
	}
}

You can download the sample login form template below.

If you have any question regarding with this tutorial. Feel free to post your comment below.

Comments

There are no comments available.

Write Comment
0 characters entered. Maximum characters allowed are 1000 characters.

Related Articles