Intro:
Hello readers in this blog post I will tell you how to Create a very simple Login page or Login form using HTML and CSS only it is very simple and also it’s very easy to make this form. If you are a beginner in coding and programming, this blog post is best for you. I also shared the complete source code of my all projects with my audience free of cost. Recently I create an Age Calculator using HTML, CSS and JavaScript please check this.
What is Login Form?
A login form is a form on a website that allows a user to enter their credentials, such as a username and password, to access the website or a particular part of the website. The login form is typically used to authenticate the user and grant them access to the website or specific content on the website. It is a common feature on many websites and is often used to restrict access to certain areas or features of the site to only registered users.
Login Form / Login Page Using HTML CSS
It is very easy to create this type of login form using HTML and CSS in this design first i add one dark background image after that add one heading two input fields, one button and some text.
How to Create a Simple Login Page Using HTML CSS
Please follow these steps to create this type of Login page design using HTML and CSS only.
- Create a two files one is for HTML and another one for CSS.
- Link CSS file with HTML file.
- Add image in background.
- Create Heading “Login Form”, input fields, buttons and some text in HTML file.
- Then go to CSS file and write CSS for HTML elements and customize elements as you want.
Follow these five steps to create login form If you don’t understand these steps so watch this given video. I also provide a video tutorials for my audience to watch and understand easily. But i have one request to you if you are interested in coding and programming and you are related to this categories so please subscribe my YouTube Channel.
Video Tutorial [How to make Login Page Using HTML CSS]
You might like this:
Source Code of Login Page Design Using HTML CSS
As you know i also provide a source code of my all projects with audience for free of cost so here is the source code of this Login Page design. Copy the given code and paste in your file.
First you need to Create one file for HTML and copy the given code and paste it into your file make sure your HTML file is in (.html) extension.
HTML FILE
<!-- Created by Codingpakistan.com --> <!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"> <title> Simple Login Page - CodingPakistan.com</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="login-form"> <h1>Login Form</h1> <form> <p>User Name</p> <input type="text" name="user" placeholder="User Name"> <p>Password</p> <input type="password" name="password" placeholder="Password"> <button type="submit"> Login</button> </form> </div> </body> </html>
Then create a CSS file and copy the given code and paste it into your CSS file make sure your file with correct format (.css) other wise code is not working properly.
CSS FILE
/* Created by www.codingpakistan.com */
*{
padding: 0;
margin: 0;
font-family: sans-serif;
}
body{
background-image: url(bg-1.webp);
background-color: rgb(22, 21, 21);
}
.login-form{
width: 350px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
color: white;
}
.login-form h1{
font-size: 40px;
text-align: center;
text-transform: uppercase;
margin: 40px 0;
}
.login-form p{
font-size: 20px;
margin: 15px 0;
}
.login-form input{
font-size: 16px;
width: 100%;
padding: 15px 10px;
border: 0;
outline: none;
border-radius: 5px;
}
.login-form input:active{
border: 2px solid yellow;
}
.login-form button{
font-size: 18px;
font-weight: bold;
margin: 20px 0;
padding: 10px 15px;
width: 50%;
border-radius: 10px;
margin-left: 100px;
}
.login-form button:hover{
background-color: yellow;
cursor: pointer;
transition: .5s;
}
CSS OUTPUT
You see the final Output in this given image
Download Source Simple Login Page.
If your code is not working correctly and you face any type of issue so click the download button zip file is automatically downloaded first you need to extract this file and use it according to your need.
If you have any questions about this please ask in the comments section I will answer as soon as possible. Thanks 🥰
