Welcome to Coding Power! If you want to learn how to create the best login form in HTML and CSS, you don’t have to go anywhere else. This article explains the proper code syntax and provides full source code.
A login form is used to authenticate users and grant access to secure sections of a website or application. Having a separate form for login and registration is necessary for better user interaction and experience.
Table of Contents
Introduction
To design a good login page, you should try to keep it simple, ask for an email instead of a username, make it easily accessible, and add a remember me an option for a better user experience which inturn improves your ranking in search engines.
We will learn how to create the perfect pricing card design using HTML and CSS. You can also make a Responsive Login Form Design Using HTML and CSS while incorporating this login form design.
Watch the full tutorial on YouTube
I have made one video on creating a Login Form in HTML and CSS. So, if you prefer videos over articles, you can watch this full tutorial on my YouTube channel, and then you can come back here if you need the full source code. You can also check out more tutorials on my channel and subscribe if you like my content.
Source code for the Login Form In HTML and CSS
Creating the HTML Structure
Create a file named index.html with the default HTML boilerplate code for the pricing card design. Include the Font Awesome CDN inside the head section for icons. Font Awesome is the best icon library and toolkit; it is easy to use and used by millions.
Create a div with the class name ‘container’ that contains a div with the class name ‘title’, a form element, a div with the class name ‘loginwith’, and a div with the class name ‘signup’. The form element consists of a text input, a password input, a div, and a button.
Finally, the loginwith div contains a div with the class name ‘facebook’ and a div with the class name ‘google’. Each of those div contains an appropriate icon, and a paragraph element.
Refer to the following HTML code and paste it into the file named index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Login Form</title>
</head>
<body>
<div class="container">
<div class="title">
<h2>Login</h2>
</div>
<form>
<input type="text" placeholder="Username or Email">
<input type="password" placeholder="Password">
<div><a href="#">Forgot Password?</a></div>
<button><a href="#">Login</a></button>
</form>
<p>OR</p>
<div class="loginwith">
<div class="facebook">
<i class="fa fa-facebook-f"></i>
<p>Login With Facebook</p>
</div>
<div class="google">
<i class="fa fa-google"></i>
<p>Login With Google</p>
</div>
</div>
<div class="signup">
Don't have an account ? <a href="#">SignUp Here</a>
</div>
</div>
</body>
</html>Styling with CSS
Create a CSS file named style.css and link it to the HTML file. Do not forget this step; otherwise, the CSS styles won’t be applied.
Style the body element to take up the full width and height of the viewport with a flex display, centered align-items, centered justify-content, and a black background. The container div is styled to have a center text alignment, a white background, and a border radius of 10 pixels.
The form element is styled to have a relative positioning, and the input element is styled to have a font size of 16 pixels, a solid gray border, a border radius of 3 pixels, and no outline. The div inside the form is styled to have an absolute positioning.
Now, the button element inside the form is styled to have a font size of 20 pixels with a border radius of 5 pixels, a pointer cursor, a solid gray border, a background of #429c0d, and no outline.
Then, the Facebook div and Google div are styled to have a flex display with a centered justify-content, a solid gray border, a border radius of 5 pixels, and a cursor pointer. The background color of facebook div is #1877f2 and that of google div is #EA4335.
The <i> tag inside loginwith div is styled to have a font size of 20 pixels with a line height of 15 pixels, a white-colored text, and centered justify-content. Finally, the signup div is styled to have a font size of 15 pixels with appropriate padding and margin for spacing.
Refer to the following CSS code and paste it into the file named style.css:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body{
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: black;
}
.container{
width: 400px;
text-align: center;
background-color: white;
border-radius: 10px;
box-shadow: 2px 5px 30px #000000;
}
.container::before{
content: "";
background: url(pic1.jpg) no-repeat center center/cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
opacity: 0.9;
filter: blur(3px);
}
.container .title{
margin-bottom: 10px;
padding: 20px;
}
.container .title h2{
font-size: 30px;
}
.container form{
width: 75%;
margin: 15px auto;
position: relative;
}
.container form input{
width: 100%;
height: 45px;
margin: 8px 0;
padding-left: 15px;
font-size: 16px;
border-radius: 3px;
border: 1px solid gray;
outline: none;
}
.container form div{
position: absolute;
left: 5px;
margin-top: 5px;
}
.container form div a{
font-size: 14px;
}
.container form button{
width: 100%;
height: 45px;
font-size: 20px;
margin-top: 50px;
border-radius: 5px;
cursor: pointer;
border: 1px solid gray;
outline: none;
background: #429c0d;
}
.container form button a{
text-decoration: none;
color: white;
}
.container > p{
padding: 10px;
}
.container .loginwith{
width: 75%;
margin: 10px auto;
}
.container .loginwith .facebook,
.container .loginwith .google{
width: 100%;
display: flex;
justify-content: center;
padding: 10px;
border: 1px solid gray;
border-radius: 5px;
margin-bottom: 8px;
cursor: pointer;
}
.container .loginwith .facebook{
color: white;
background: #1877f2;
}
.container .loginwith .google{
color: white;
background: #EA4335;
}
.container .loginwith div i{
margin-right: 15px;
font-size: 20px;
line-height: 15px;
color: white;
justify-content: center;
}
.container .loginwith div p{
line-height: 15px;
}
.container .signup{
padding: 15px;
font-size: 15px;
margin-bottom: 10px;
}To create the best login form in HTML and CSS, you only need to follow the video tutorial’s instructions. You can download the full source code by clicking the button below.
Conclusion
In this article, we have shown all the steps with a proper explanation of the full code, so it will help you learn and create an amazing login form in HTML and CSS according to your needs.
Still, if you are not getting anything from the above code or have doubts, please leave your question in the comment section. I am happy to help.
See Also: Perfect Google Home Page Using HTML and CSS
FAQ
How to create a simple login form in HTML?
Create a div with the class name ‘container’ that contains a div with the class name ‘title’, a form element, a div with the class name ‘loginwith’, and a div with the class name ‘signup’. Finally, apply the appropriate styling.
How to design a login page?
To design a good login page, you should try to keep it simple, ask for an email instead of a username, make it easily accessible, and add a remember me option for a better user experience.