How to create a Login Form using HTML and CSS?
create a login form using html | create login form using html and css | how to create login form using html and css | how to create login form using html | how to create login form using css | design a login form using html and css | design a login form using html | design a login form using css | login form using html |login form | html login form | code for html login form
Login form is very important criteria for any website. A login form is only criteria where you are allowing users to access many more features of your website as well as its easy to differentiate users when you have there data or they registers to your website. If you want to create a registration form, check our article on how to create a registration form using HTML & CSS only. So today we are going to design a Login page.
Before jump into the coding lets do some brainstorming. Just put up one paper and pen, assume and noted down below points:
- Draw a dummy login form however you wants to your login page looks like.
- Note down if login is successful what will happen?
- Note down if login fail what action to be done?
- Look for layout color font which you are going to use.
So like that you will do your basic requirements brainstorming.
So today we will create a login form which includes:
- 2 labels elements for login texts.
- 2 input boxes for user input.
- 1 external links for forgot password
- 1 button to Login.
We will use HTML code for base and CSS to design it. So lets get started.
Preparing Documents:
Here we created two new documents for our code.
- First one is loginPage.html, for our HTML code.
- Second one is style.css, for our CSS code.
Open loginPage.html file in your favoret text editor and start writing the code to create HTML Login form.
Code
<!DOCTYPE html>
<html>
<head>
<title>Login Form</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="formContainer">
<form>
<label class="labelMain">Login Here</label><br>
<label class="labelSub">User Name:</label><br>
<input type="text" required><br>
<label class="labelSub">Password:</label><br>
<input type="password" required><br>
<h6><a href="#">Forgot Password?</a></h6><br>
<button>Log In</button>
</form>
</div>
</div>
</body>
</html>
save the loginPage.html file and open it on your browser. You will get the Login window like shown at below image:
lets see which html code creates which element in webpage.
So we can see in above image the piece of code and what we get on return in our page.
now your HTML login page is ready, its time to make over it to create a presentable login page through CSS code.
To add CSS code open your style.css file on your favorite text editor. And write below code.
CSS Code
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
body{
background: #000000;
color: #f6f6f6;
font-family: "Ubuntu", "Raleway";
}
.container{
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.formContainer{
width: 800px;
height: 500px;
background-color: tomato;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
form{
line-height: 2;
}
.labelMain{
font-weight: bold;
color: #000000;
}
input{
width: 300px;
height: 25px;
}
form a{
color: #343434;
}
button{
width: 100px;
color: #343434;
}
button:hover{
background-color: #343434;
color: #f6f6f6;
cursor: pointer;
}
to connect out HTML file and CSS file we create linking between these two file for that follow below steps:
- open html file to your text editor.
- Go to under <head></head> element section.
- Give this code: <link rel="stylesheet" type="text/css" href="style.css">
Note: The link tag in linking between external documents and html document.
after applying this CSS code to your document you will get your login form as shown below:
so like that you can easily design your login page through HTML/CSS.
Its just a basic way of creating a login page, you can do much more by keep practice. You can create a pop-up login page, a Home build login, animated login page and lots of more.
What you need to do is to learn basic of HTML and CSS and start practicing. You can check our HTML and CSS course to this website to learn more. Keep in touch we will back soon with lots of other tutorials and designs.
Thank you
Feel free to leave your comments below.
Well explained. We can also use this code to add login page in our blog too.
ReplyDeleteVery well explained. Very helpful post
ReplyDeleteWell explained and useful...
ReplyDeleteInformative article.
ReplyDeleteA great read��
This is very useful information I will definitely try it thanks for sharing 😊
ReplyDelete