Creating a login page is an essential step for any website or application that requires user authentication. It allows users to securely log in and access their personal information. In this article, we will show you how to create a simple login page in HTML with CSS code. This tutorial will help you create a professional-looking login page that is easy to navigate and use. You will see how to write the HTML and CSS code for a simple login page with a username and password.
HTML stands for HyperText Markup Language. This is the most important markup language that can be used to create a webpage. It is used to display text, images, audio, and video on a webpage.
CSS stands for Cascading Style Sheets. It is used to style HTML documents. CSS can make responsive web pages and is used for styling and its collection of formatting rules. It is used for designing purposes. The CSS extension is (.CSS).
There are three types of CSS:
-
Inline CSS
-
Internal CSS
-
External CSS
Step 1
Create a new folder and give a name to the folder. In the folder save an HTML and CSS file. After creating the folders, open the sublime text editor.
![How To Create A Simple Login Page Using HTML And CSS]()
Step 2
Click File, Select New File, and Click Save. Give the file the name “index.html”.
![How To Create A Simple Login Page Using HTML And CSS]()
Step 3
Next, click File, then New File, and click Save. Give the file the name “style.css”.
![How To Create A Simple Login Page Using HTML And CSS]()
Step 4
Now, link the HTML and CSS to the HTML file you just copied and paste this code in the heading tag:
<head>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
Step 5
Next, create a structure for the login page using HTML, Username, and Password.
<!DOCTYPE html>
<html>
<head>
<title>Login Form</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<h2>Login Page</h2><br>
<div class="login">
<form id="login" method="get" action="login.php">
<label><b>User Name
</b>
</label>
<input type="text" name="Uname" id="Uname" placeholder="Username">
<br><br>
<label><b>Password
</b>
</label>
<input type="Password" name="Pass" id="Pass" placeholder="Password">
<br><br>
<input type="button" name="log" id="log" value="Log In Here">
<br><br>
<input type="checkbox" id="check">
<span>Remember me</span>
<br><br>
Forgot <a href="#">Password</a>
</form>
</div>
</body>
</html>
Step 6
Next, write code in CSS to apply some style to the HTML so you can change the look of the login page.
body
{
margin: 0;
padding: 0;
background-color:#6abadeba;
font-family: 'Arial';
}
.login{
width: 382px;
overflow: hidden;
margin: auto;
margin: 20 0 0 450px;
padding: 80px;
background: #23463f;
border-radius: 15px ;
}
h2{
text-align: center;
color: #277582;
padding: 20px;
}
label{
color: #08ffd1;
font-size: 17px;
}
#Uname{
width: 300px;
height: 30px;
border: none;
border-radius: 3px;
padding-left: 8px;
}
#Pass{
width: 300px;
height: 30px;
border: none;
border-radius: 3px;
padding-left: 8px;
}
#log{
width: 300px;
height: 30px;
border: none;
border-radius: 17px;
padding-left: 7px;
color: blue;
}
span{
color: white;
font-size: 17px;
}
a{
float: right;
background-color: grey;
}
Step 7
Before using CSS code, the output looked like this:
![How To Create A Simple Login Page Using HTML And CSS]()
After using the CSS code, the output looks like this:
![How To Create A Simple Login Page Using HTML And CSS]()
Summary
We have successfully created a Login page. I hope this article is useful to you. If you have any comments on this article, please ask in the comment section.