Create A Login Page Form Using HTML And CSS - With Source Code

An integral part of any website is its login functionality. No matter what web technology you use, users go through the process of logging in to your website and interacting with the login page the most number of times.

Having a fancy responsive login page is a must these days as the demand for mobile web pages has far increased that of desktop ones.

Having a beautiful login page is essential. Users have to instantaneously like your login page to give that best first impression.

In today's blog post, we will create a beautiful yet simple login web page using HTML and CSS only and I will also leave the source code so you can use it for your website.

What will our login page look like?

We will be building this simple yet beautiful login page by just writing some HTML and CSS.

This login page will be centered on the screen vertically and horizontally.

It will have two input text fields, username, and password.

It will also have a remember me checkbox, just if the developer wants to remember their login details.

Then there will be a full-width login button.

Users who don't yet have a username and password on this website can go to the sign-up link. This will be provided just below the login button.

We will also have an option of signing in using social links like Facebook and Google.

Now that we know what we are building, let's go ahead and understand how, step by step.

Login Page HTML Structure

I am using visual studio code as my code editor and I will start by creating two files in the folder.

1. Index.html
2. Style.css

After creating these two files, we will create the structure for our index.html page. We are using the Emmet extension inside visual studio code to create the basic structure for the HTML page.

 This is what the HTML structure looks like. 

I have linked my style.css fie in the link tag. 

I am using Fontawesome Icons to add icons to my website. They are super simple to use and very versatile. They provide a brilliant aesthetic to websites.

I will signup to Fontawesome and then use the script tag to add the icons to our Login HTML page.

Now, we will add the HTML structure to our login page.

As you can see in the image below, I have added some HTML elements for our login page, we will now go line by line and understand what's happening in our HTML code. 

Explanation Of Our HTML Code

In the body tag of our HTML page, we start by creating a div element with a class of container. This will be the white box that you see in our first image.

Then we add a div with a class of login-box. This will be our actual login container.

This login box will have four main components. 

On the top it will have an icon, then the login elements such as inputs, checkbox, and button, then we will have the separator for the social links and finally, we will have the buttons for social login.

The code is very clean and easy to understand. You can find the source code at the end of this post.

Login Page CSS Code

Once we have created the HTML structure, it's now time to make things beautiful by adding some styles to our elements.

We will first start by adding a Google font to our website and then define the body and html tags.

Then we add the styles for the containers that we created.

Now, if you go to the initial image, we have the login icon on the top. 

Let's style this.

We are giving the icon the full width of the login box and placing the icon right in the middle.

At this point, our login page looks something like the below:

Now, let's style the input controls. 

That's it! With all that HTML and CSS code, we can achieve a beautiful-looking login page that your visitors like.