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.
Really clean web site, thanks for this post.
Awesome post.
Hello i am kavin, its my first time to commenting anyplace, when i read this piece of writing i thought i could also make comment due to this brilliant article.
And, after once again, this will demand a important quantity of time.
Hi, I would like to subscribe for this website to take latest updates, therefore where can i do it please help.
My relatives always say that I am wasting my time here at web, except I know I am getting familiarity daily by reading thes pleasant content.
Hi mates, its enormous piece of writing on the topic of educationand entirely explained, keep it up all the time.
Thank you for sharing your info. I really appreciate your efforts and I am waiting for your further post thank you once again.
We hold on holding top rated ranking for all of our targeted keyword phrases.
Whereas preserve struggling organically for each high volume and low volume keyword.
Paragraph writing is also a excitement, if you be acquainted with after that you can write or else it is complicated to write.
Hey would you mind sharing which blog platform you’re using? I’m going to start my own blog in the near future but I’m having a hard time choosing between BlogEngine/Wordpress/B2evolution and Drupal. The reason I ask is because your design and style seems different then most blogs and I’m looking for something completely unique. P.S Apologies for getting off-topic but I had to ask!
I believe this is among the most important info for me. And i’m glad studying your article. But want to statement on few normal things, The website style is ideal, the articles is truly nice : D. Just right process, cheers
Thanks for the good writeup. It in fact was once a entertainment account it. Glance advanced to far added agreeable from you! However, how could we communicate?
This is really interesting, You’re a very skilled blogger. I have joined your feed and look forward to seeking more of your excellent post. Also, I have shared your website in my social networks!
each time i used to read smaller posts which also clear their motive, and that is also happening with this post which I am reading at this time.
What’s up, after reading this awesome paragraph i am as well delighted to share my knowledge here with colleagues.
Thanks for sharing your thoughts about %meta_keyword%. Regards
Hi to every one, since I am genuinely eager of reading this webpage’s post to be updated daily. It carries fastidious information.
Thanks for sharing your thoughts about %meta_keyword%. Regards