How To Create A Login Box In Html

Updated date Mar 18, 2020

489.9k
7

In this article, you will learn how to create a simple login page using HTML and CSS.

Introduction

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, image, audio, and video in 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>
<divclass = "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 : #6abade ba;
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 in this article, please ask in the comment section.