Hello guys, Today in this blog post, I am going to tell you how to create a beautiful login form using HTML and CSS only, not other types of languages. You know that on this website, I share very interesting projects using HTML and CSS.
What is the sign-up form?
A signup form is a type of data collection. For example, if you visit an e-commerce website like Amazon, Flipkart, or other types of websites like Facebook and YouTube, you first need to sign up for these sites before you can use them to purchase anything or post any pictures you want.
When you successfully sign up for these sites, your data is stored in a database. When again you visit any website, you don’t need to create an account; you just need to enter your login details and you will be successfully logged in.
What is a login form?
The login form is a type of data collection where every person enters their details like email, username, and password, and then again you visit that website to enter your details and use it like Facebook, Instagram, Youtube, etc.
There are many types of login forms available on the internet and in the online world, but today I have created a very beautiful design. you see in the picture given below.
In this design, first, I create a profile image in the top and middle of the center. You can change the image as you wish. one field for the user name and one field for the password, and only one button with login text. And in the last step, you see the two links, one of which says, “Lost your password?” and the other says, “Don’t have an account?”
There are a large number of users in the world who have lost their passwords. So in the end, I have inserted one option to recover your password.
I used HTML for text and headings, but the main thing is CSS because, in this design, CSS properties are used to make this beautiful login page design. Without CSS style, there is no chance to make this type of beautiful design. Until you don’t use other CSS libraries like Tailwind CSS, TailBlock, etc.
Steps to Create a Login Form:
- First, you need to create two files: one is HTML and the other is CSS.
- Then you link the CSS file with the HTML file.
- In an HTML file, you just need the very minimum code for the heading, input field, login button, and some text.
- In the HTML file, you give the classes of all elements and targets; in the CSS file, you also use inline CSS, so you don’t need to create a separate file of CSS styles.
- So go to the CSS file. Write some basic code and customize the design as you want. For Example, in this design, the button color is red, but you don’t need red, so change the background color to “yellow;”
Video Tutorial of the Login Page Design
In the video, you have seen the login form and page design using HTML and CSS. I hope you’ve understood the basic codes behind creating this login page. In this video tutorial, I explain the login page from the beginning to the end. Please watch this video if you are a beginner. Don’t worry about it; it is very simple to create this design.
Just watch this video on Focus. If you have any questions about this video tutorial, so please comment down below and I will answer as soon as possible.
I also provide the source code for this login page’s design using HTML and CSS. If you don’t have time to create this design from scratch, just copy and paste this code into your code editor, and your design will be ready in a few seconds. 😍😍
Login Page Design [Source Codes]
To create this design, first, you create two files, one for HTML and another for the CSS style sheet.
After creating these files, just paste the following codes into your file. First, create an HTML file with the name index.html and paste the given codes into your HTML file. Remember, you’ve got to create a file with the “.html” extension.
HTML FILE
<!DOCTYPE html>
<!-- Created by CodingPakistan - www.codingpakistan.com -->
<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">
<title>Login Form HTML CSS</title>
</head>
<body>
<div class="loginbox">
<img src="profile image.jpg" alt="" class="avatar">
<h1> Login Here </h1>
<form>
<p> User Name </p>
<input type="text" placeholder="Enter Username">
<p> Password</p>
<input type="password" placeholder="Enter Password">
<input type="submit" value="Login">
<a href="#"> Lost Your Password?</a> <br>
<a href="#"> Don't have an Account?</a>
</form>
</div>
</body>
</html>
Second, create a CSS file called style.css and put the provided codes inside of it. Keep in mind that you must create a file with the “.css” extension.
CSS FILE
/* Created by CodingPakistan - www.codingpakistan.com */
body{
margin: 0;
padding: 0;
/* background: url(pic\ 1.jpg); */
background-size: cover;
font-family: sans-serif;
background-color: rgb(171, 23, 171);
}
.loginbox{
width: 320px;
height: 420px;
background: black;
color: white;
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%,-50%);
box-sizing: border-box;
border-radius: 10px;
padding: 70px 30px;
}
.avatar{
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
top: -50px;
left: 110px;
}
h1{
margin: 0;
padding: 0 0 20px;
text-align: center;
font-size: 22px;
}
.loginbox p{
margin: 0;
padding: 0;
font-weight: bold;
}
.loginbox input{
width: 100%;
margin-bottom: 20px;
}
.loginbox input[type="text"], input[type="password"]
{
border: none;
border-bottom: 1px solid #fff;
background: transparent;
outline: none;
height: 40px;
color: white;
font-size: 16px;
}
.loginbox input[type="submit"]
{
border: none;
outline: none;
height: 40px;
background: red;
color: white;
font-size: 18px;
border-radius: 20px;
}
.loginbox input[type="submit"]:hover
{
cursor: pointer;
background-color: yellow;
color: #000;
transition: 0.5s;
}
.loginbox a{
text-decoration: none;
font-size: 12px;
line-height: 20px;
color: darkgrey;
}
That’s all, now you’ve successfully created a login page using HTML and CSS. Please obtain the source code files from the provided download button if your code doesn’t function or you’ve encountered any errors or problems. You must first extract the.zip file that will be downloaded as part of the free service.
