Create Login Form Using HTML5 and CSS3 – Clean and Responsive

Hi… today we’ll discuss how to create a login form using HTML 5 and CSS 3.

On the internet, there are many ready-to-use login form design, but to understand how to create and design the form, we will more easily to customize it to suit our website.

Not only create a login form using HTML 5, this time we’ll also discuss how to design it using CSS 3 either for desktop or mobile browser.

The final result looks like the following figure:

Create Login Form Using HTML 5 and CSS 3

Components and browser support

The above login form can be run well on a modern browser such as Chrome, Firefox, Safari, and Opera. For Internet Explorer, it can run well on version 8+.

For the icon, we’ll use font-awesome icon, that can be downloaded here.

I. Create Login Form Using HTML 5

Before we discuss how to design login form using CSS 3, first, we discuss HTML 5 element used to build a form.

In our form, we’ll use an email and password to log in.

For email, we use input element with email as the element type. This is useful because in a mobile browser, if this element has focused, the keyboard will change to “email friendly keyboard” that usually display the “@” and “.com”  character.

For password, we use the general password type of input element, this will mask the password and in the mobile browser, this will also change the display of the keyboard that usually show the alpha-numeric key

The HTML Code:

<div class="login-form-container" id="login-form">
	<div class="login-form-content">
		<div class="login-form-header">
			<div class="logo">
				<img src="img/logo.png"/>
			</div>
			<h3>Login Into Your Account</h3>
		</div>
		<form method="post" action="" class="login-form">
			<div class="input-container">
				<i class="fa fa-envelope"></i>
				<input type="email" class="input" name="email" placeholder="Email"/>
			</div>
			<div class="input-container">
				<i class="fa fa-lock"></i>
				<input type="password"  id="login-password" class="input" name="password" placeholder="Password"/>
				<i id="show-password" class="fa fa-eye"></i>
			</div>
			<div class="rememberme-container">
				<input type="checkbox" name="rememberme" id="rememberme"/>
				<label for="rememberme" class="rememberme"><span>Remember me</span></label>
				<a class="forgot-password" href="#">Forgot Password?</a>
			</div>
			<input type="submit" name="login" value="Login" class="button"/>
			<a href="#" class="register">Register</a>
		</form>
		<div class="separator">
				<span class="separator-text">OR</span>
		</div>
		<div class="socmed-login">
			<a href="#facebook" class="socmed-btn facebook-btn">
				<i class="fa fa-facebook"></i>
				<span>Login with Facebook</span>
			<a>
			<a href="#g-plus" class="socmed-btn google-btn">
				<i class="fa fa-google"></i>
				<span>Login with Google</span>
			<a>
			<a href="#g-plus" class="socmed-btn yahoo-btn">
				<i class="fa fa-yahoo"></i>
				<span>Login with Yahoo</span>
			<a>
		</div>
	</div>
</div>

In the above code, there are three main elements:

  • The Background that contains background image that will cover full page.
  • The Backdrop that has a transparent dark color that will be used to cover the background.
  • The Container that contains our login form.

The Login form itself consists of three parts:

  • The Header containing the logo and title login.
  • Login form that contains input element of: email, password, login button and the register button.
  • Social login containing social media buttons.

This division is to make it easier when we want to change specific parts, such as removing the social media button.

The division look likes the following figure:

Styling Login Form Using CSS 3 - The Division

1. Header

On the header part, we add our company or website logo and the title of the form (we use H3 element), in this example “Login Into Your Account”

You can make it simpler by eliminating the logo and shorten the title to just “Login”

2. Login Form

At the login form part, we add email and password inputs, besides that, there are also a login and a register button.

Email and Password

Email field is composed of two elements: <i></i> that contains the email icon and <input/> that contains the email field.

For the password field, there are three elements: the first <i></i> that contains the padlock icon, <input/> for the password and the second <i></i> that contains the eye icon to show the character of the password.

HTML Code For Login Form

We give placeholder attribute to the email and password input elements, so that when the field is empty, it will show up the text: Email and Password.

Login and Register button

For the submit button, we use an input element <input/>, for the register button, we use an anchor element <a>

II. Design Login Form Using CSS 3

After we successfully create a login form using HTML 5, now it’s time to styling it.

1. Background and Backdrop

Background and Backdrop elements has the same characteristics that cover all areas of the screen, the CSS code that we use:

.background, 
.backdrop {
	background-color: #3f689c;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

position: fixed will make the position of the element to be “fixed” according to the position of top, left, right, and bottom values that are defined.

For backdrop element, we make it cover (in front of) the background element and change the background-color to transparent by 90%, while the CSS code that we use:

.backdrop {
	filter: alpha(opacity=90);
	opacity: .9;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
}

In the DEMO, there are two types of background that are dotted and blurred. For dotted background, we add a dotted image in the backdrop element. While for the blurred background, we add some CSS code. The CSS code looks like the following:

.background {
	filter: blur(15px);
	-webkit-filter: blur(10px);
	-moz-filter: blur(5px);
	-o-filter: blur(5px);
	-ms-filter: blur(5px);
	filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius=5); */
}

NOTE The Blur effect can only be applied to non-IE browser

2. The Container

We make the login form in the middle of the screen, the CSS code is:

.login-form-container {
    max-width: 400px;
    width: 100%;
    z-index: 1;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -200px;
    margin-top: -286px;
}

In order to make it to the center, we make the position of the container to absolute.

Furthermore, we need to determine the width and height of the container, in the example above, we make maximum width 400px (max-width: 400px; width: 100%).

The max-width: 100% will make the container has a width of 100% on the viewport < 400px, whereas if the viewport > 400px, the width of the container remains 400px.

To make the container centered horizontally we add left property with a value of 50% left: 50% plus a margin-left half of the width of the container (margin-left: 200px)

To make the container centered vertically, we add top property with a value of 50% top: 50% plus a margin-top half of the height of the container (margin-top: -286px)

Illustration:

Illustration of Center Position

 

3. Header

On the header, we make the position of the logo and title centered by simply giving text-align property with center as the value (align: center)

.login-form-header {
     text-align: center;
}

In addition, we add a gray circle border on the logo (img element), to turn the border into a circle, we set the border-radius property with a value of: at least half of the width of the element.

In the above example, because the width of the logo is 86 px so we set the border-radius to 43px (border-radius: 43px)

Illustration of Border Radius

4. Login Form

For the login form part, we use CSS code as follow:

.login-form .input-container {
	border-bottom: 1px solid #CCCCCC;
    margin-top: 15px;
    font-size: 20px;
    color: #9e9e9e;
	padding-bottom: 5px;
}
.login-form .input {
	border: 0;
	width: 200px;
}
.login-form .input:focus {
    outline: none;
}
#show-password {
	float: right;
    vertical-align: bottom;
    text-align: center;
    margin-top: 7px;
	cursor: pointer;
}
.login-form .forgot-password {
	float: right;
}
.login-form .rememberme-container {
	margin-top: 15px;
	padding: 0;
}
.login-form .rememberme-container input {
	margin-left: 0;
}
.login-form .rememberme span {
	vertical-align: top;
}
.login-form .button {
	margin-top: 15px;
    width: 100%;
    background: #2e7ec7;
    border: 0;
    color: #FFFFFF;
    padding: 10px;
    font-size: 15px;
	cursor: pointer;
	transition: background .3s;
}
.login-form .button:hover {
	background: #1f6eb7;
}
.login-form .button:focus {
	outline: none;
}
.login-form .register {
	margin-top: 5px;
    background: #CCCCCC;
    border: 0;
    color: #676464;
    padding: 8px;
    font-size: 15px;
    display: block;
    text-align: center;
}
.login-form .register:hover	{
	background: #b7b7b7;
}

On the email and password fields, we add a border on the bottom. This border comes from the container (<div class="input-container">) not from the input element

In addition, we add an icon to each input element (mail and padlock icon)

5. Separator

Before the social element login, there is a separator with the word “OR”. To create it, we use two elements: div and span.

The HTML code:

<div class="separator">
	<span class="separator-text">atau</span>
</div>

While the CSS code:

.separator {
    margin: 20px 0;
    border-top: 1px solid #CCCCCC;
    position: relative;
}

We make the div element has a border on the top border-top: 1px solid #CCCCCC and has a relative position position: relative.

The relative position will make the div element as the reference element for the span element for its position (because it has an absolute position).

We make the span element absolute and move it upwards -11px so it looks in the middle of the border-top of the div.

.separator-text {
    display: block;
    position: absolute;
    top: -11px;
    left: 50%;
    margin-left: -22px;
    padding: 0px 10px;
    background: #FFFFFF;
    color: #8a8a8a;
}

6. Social Login Button

In the example above, we make three social login buttons: facebook, google, and yahoo.

We make these buttons using anchor elements (<a>). Style that we use exactly the same as the style on the register button, the difference is just in the color.

.socmed-login .socmed-btn {
    padding: 10px 25px;
    color: #FFFFFF;
    display: block;
    margin-top: 5px;
    text-align: center;
}

To make 100% width, we just need to set the display of the anchor element into block (display: block), don’t need to set the width property.

III. Styling Login Form Using CSS 3 – Responsive design

In order to make the login form remain comfortably viewed on a small viewport (smartphone), then we need to add a CSS code for specific screen size.

Adjust the height of the form

Because the form is quite high (574px), which may be higher than the viewport of the smartphone, then we need to adjust the top margin of the form for of a particular screen size:

@media screen and (max-height: 600px) {
	.login-form-container {
		margin-top: 0;
		top: 10px;
	}
}

if viewport > 600px, then the form will be 10px below the top.

Adjust the width of the form

To make the form looking neat when opened in a small viewport, we need to adjust the width of the form and the size of some other elements

@media screen and (max-width: 400px) {
	.login-form-container {
		left: 5px;
		margin-left: 5px;
		min-width: 283px;
		right: 10px;
		margin-bottom: 10px;
		width: auto;
	}
	.login-form .input {
		width: 140px;
	}
	.socmed-login .socmed-btn i {
		margin-right: 5px;
		width: 19px;
	}
}

On the above style, since the width of the form is 400px, we need to limit the maximum of the viewport to 400px, if less than that, then the window will be scrolled horizontally.

In addition, we also reduce the width of the input elements (email and password).

IV. Show Password

When the user clicks the eye icon, then the password will be changed to e normal text (not masked), to do so, we use a javascript code, in this case, I use the jquery library.

The javascript code:

$('#show-password').click(function() {
	if ($(this).hasClass('fa-eye')) {
		$('#login-password').attr('type', 'text');
		$(this).removeClass('fa-eye');
		$(this).addClass('fa-eye-slash');
	} else {
		$('#login-password').attr('type', 'password');
		$(this).removeClass('fa-eye-slash');
		$(this).addClass('fa-eye');
	}
})

In the script above, if we click on the eye icon, then the value of type attribute of the password input element will be turned into text and the eye icon turns into an “eye-slash” icon, if we click once again then the value of type attribute becomes password and the icon turns into “eye” icon.

Final Words

Create Login form using HTML5 and CSS3 can be done easily with some simple steps,all we need to do it make the design match out website theme.

Leave a comment

Like Us

Social