The paper stack login form is a pretty common technique for designers. We don’t see this as often nowadays thanks to the popularity of flat design. Yet I’m still a fan of this style and it’s why this HTML5 form by Vladimir Banduristov deserves praise. It works entirely in HTML and CSS with some very clean form input designs.
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:
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:
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:
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.
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:
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:
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:
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:
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:
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)
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
)
4. Login Form
For the login form part, we use CSS code as follow:
On the email and password fields, we add a border on the bottom. This border comes from the container (<div>
) 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:
While the CSS code:
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.
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.
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:
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
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:
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.
Subscibe Now
Loves articles on webdevzoom.com? join our newsletter to get quality article right to your inbox. Nothing else, just quality stuff!!!