In this blog post, you will learn how to create a login page in HTML and CSS. A login page collects information from the user and submits it to the server side when the user clicks on submit button present on the form.
![Login Page in HTML](https://codeblockx.com/wp-content/uploads/2022/12/codeblockx-11-768x432.png)
We have used HTML Forms, CSS, and Flexbox with its properties to make this Login page. A login page mainly Consists of a Username/Email, Password, Forget Password link, Submit button, and Register now link. This will look like:-
![Login Page with HTML and CSS](https://codeblockx.com/wp-content/uploads/2022/12/Screenshot_20221223_100123-e1671773907940-768x530.png)
Steps to create a Login Page in HTML:-
- Open your text editor and type the basic codes (HTML, Head, Title, Body)of HTML.
- After typing these tags, Comes to the body section and then types Form tag.
- Under the form tag, Write the first label Username/Email, and close the label.
- After the label tag, type the input tag with the properties Type, Placeholder, and Name.
- Repeat the third and fourth steps for the password field.
- Now make a new label tag and under it write the input tag with the checkbox property for remember me.
- To make forgot password we will use the anchor tag under the p tag.
- For the most important element Login button, we will use a button tag with submit type in it.
- If you want to create a register now link to your website you can make it with an anchor tag under the paragraph tag.
Your code is ready and it will look like this(ignore div and class these are used for CSS purpose):-
Index.html
OUTPUT
![Login page with HTML](https://codeblockx.com/wp-content/uploads/2022/12/Screenshot_20221223_100521.png)
Your HTML Login Page is ready but it’s very simple. So we will use CSS in it to Style it and make it look good. We will use External CSS so add
<link rel=”stylesheet” href=”style.css”>
In your head section and create a new CSS style sheet. This is the style sheet that We have used in styling this form:-
Style.css
OUTPUT
![Login Page with HTML and CSS](https://codeblockx.com/wp-content/uploads/2022/12/Screenshot_20221223_100123-e1671773907940-768x530.png)
This Login page is responsive for different Screen because we have used
![Responsive Login Page in HTML](https://codeblockx.com/wp-content/uploads/2022/12/Screenshot_20221223_100153-e1671773777968.png)
We have used the Hover property for the submit button in which whenever someone goes on the button cursor will change to a pointer, the text of Login will change from white to green, and the button will zoom itself to 110%.
![Login Hover Property](https://codeblockx.com/wp-content/uploads/2022/12/Screenshot_20221223_100220-300x241.png)
Hover Property is also used in the anchor tag in which whenever someone clicks or moves its cursor to Forget Password or Register now. Both the text will change their color from Green to Skyblue.
![Link Hover property](https://codeblockx.com/wp-content/uploads/2022/12/Screenshot_20221223_100233.png)
You can also style this form according to your choice or can even make changes in the above stylesheet. Hope this blog was helpful to you. Thank you for coming to our blog. If you have any doubts about any coding Questions let us know in the comments section. We will answer it as soon as possible. Till then check out more related posts.