Login is mandatory for any websites nowadays. Here, a login form is designed to get the input from the user. The user has to enter the login id and password.
Simply open an editor like notepad. create a new file and save it as "loginform.html". Type the below coding.
<!DOCTYPE html>
<html>
<head>
<meta name=” Description" content="HTML programs">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> It’s
Login page </title>
<style>
<!-- This block defines the style properties -->
Body {
<!-- This defines the font family and sets the background as cyan -->
font-family: Times New Roman, Arial,
sans-serif;
background-color: cyan;
}
<!-- This block defines the properties for the button -->
button {
background-color: #4CAF50;
width: 10%;
color: white;
padding: 10px;
margin: 10px 0px;
}
<!-- this below code defines the border of the form -->
form {
border: 4px solid #ff1111;
}
<!-- This block sets the text box properties-->
input[type=text], input[type=password] {
width: 100%;
margin: 8px 0;
padding: 12px 20px;
border: 2px solid green;
box-sizing: border-box;
}
</style>
</head>
<body>
<center> <h1> Login Form
</h1> </center>
<form>
<div
class="container">
<label>Username :
</label>
<input type="text"
placeholder="Enter Username" name="username"
required>
<label>Password :
</label>
<input type="password"
placeholder="Enter Password" name="password"
required>
<button
type="submit">Login</button>
<input type="checkbox"
checked="checked"> Remember me
<button type="button"
class="cancelbtn"> Cancel</button>
<a href="#">
Forgot password? </a>
</div>
</form>
</body>
</html>
<meta name=” Description" content="HTML programs">
This meta tag is used to describe about the page.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This tag is used to set the viewport. This makes the web page to display good in all types of devices.
The output is shown below...
This is simple login form using HTML .
