In this tutorial, we are going to see how to create a Login Form in HTML. Login Form is an important part of a website through which a member user of any website can dive into it. Creating a login Form in HTML is easy as it provides the basic structure to the webpage. Let us see step by step with explanations on how to create a Login Form. It is to note that we are not going to use the bootstrap framework and but some CSS to stylize the Login Form. At the last of this post, you can find the complete codes of this Login Form and use it on your website by copying it.

Create a Login Form in HTML

Login.html

<!DOCTYPE HTML>
<html>
<head>
<title>Login Form in HTML</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="login">
<label for="username">Username</label>
<input type="text" placeholder="Enter Email or Username" id="username" Required>
<label for="password">Password</label>
<input type="password" placeholder="Enter your Password" id="password" Required>
<input type="submit" value="Submit">
</body>
</html>

Output:

Login form in HTML

Explanation: The codes above are to create a simple login form without any style. The <label>tag is used to label the Username and Password input field. The input type text is used for the Username input field and Input type password is used for the Password type input field. The input type submit is used to submit is used to create the submit button and then to send the data for Logging in the user. Value attribute is used to name the submit button.

Simple Styling of the Login Form in HTML

Styles.css

input[type=text] {
  width: 20%;
  padding: 8px 15px;
  margin: 8px 0;
  box-sizing: border-box;
}
input[type=password] {
  width: 20%;
  padding: 8px 15px;
  margin: 8px 0;
  box-sizing: border-box;
}
 input[type=submit] {
  background-color: grey;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}
h3{
	font-family: Arial !important;
	color:Green;
	font-weight: bold;
	font-size: 30px;
}
label[for=username]
{
    font-family: Arial;
    font-size: 20px;
}
label[for=password]
{
    font-family: Arial;
    font-size: 20px;
}

login form in HTML

Explanation: The above CSS codes stylize the HTML Login Form. It can be given style using Selector in CSS.  Here the input[type=text] is used as a selector to stylize the Username input box and input[type=password]  is used as a selector to target the password input box. Similarly, the Submit button is stylized using the input[type=submit] selector. The label is stylized using the selector label[for=username] for Username label and label[for=password] for Password label. You can use the CSS properties with your own choice to stylize the form according to your wish. Similarly learn to Create Registration form in HTML.

Complete Code:

<!DOCTYPE HTML>
<html>
<head>
<title>Login Form in HTML</title>
<style>
input[type=text] {
  width: 20%;
  padding: 8px 15px;
  margin: 8px 0;
  box-sizing: border-box;
}
input[type=password] {
  width: 20%;
  padding: 8px 15px;
  margin: 8px 0;
  box-sizing: border-box;
}
 input[type=submit] {
  background-color: grey;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}
h3{
	font-family: Arial !important;
	color:Green;
	font-weight: bold;
	font-size: 30px;
}
label[for=username]
{
    font-family: Arial;
    font-size: 20px;
}
label[for=password]
{
    font-family: Arial;
    font-size: 20px;
}


</style>
</head>
<body>
<div class="login">
	<h3>Login Form in HTML</h3>
<label for="username">Username:</label>
<input type="text" placeholder="Enter Email or Username" id="username" Required><br><br>
<label for="password">Password:</label>
<input type="password" placeholder="Enter your Password" id="password" Required><br><br>
<input type="submit" value="Submit">
</body>
</html>

Hope, this tutorial helps. Thanks for Visiting,

More from this Blog:

Avatar

By Rahulwebdev

Hello! I am Rahul Raj. A tech blogger and an enthusiastic web developer. Sharing my skills through my blog. Keen to learn various Programming Languages. " Programming is Poetry".