HTML login form is an important component of any website or web application to authenticate users. It contains input fields and submit buttons.
Key components of a login form include:
- Input Fields: To accept user credentials (e.g., username and password).
- Submit Button: To send the entered information for authentication.
- Additional Features: Options like “Remember Me, “Forgot Password” or social login options.
The login form can be created using HTML and CSS. HTML is used to create a basic structure of a form, and CSS styles are applied to the HTML element to make the form UI better.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Login Form</title>
<style>
body {
font-family: 'Arial', sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
background-color: #f5f5f5;
}
.container {
background-color: #fff;
border: 1px solid #ccc;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 300px;
text-align: center;
position: relative;
}
.container label {
display: block;
text-align: left;
margin-bottom: 8px;
font-weight: bold ;
}
.container input {
width: 100%;
padding: 10px;
margin: 8px 0;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 4px;
}
button, .container button {
background-color: #2b80ff;
color: white;
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
}
.container button:hover {
background-color: #0066ff;
}
</style>
</head>
<body>
<div class="container">
<h2>Login Form</h2>
<form id="loginForm">
<label for="username">Username:</label>
<input type="text" id="username"
placeholder="Enter your username" required>
<label for="password">Password:</label>
<input type="password" id="password"
placeholder="Enter your password" required>
<button type="submit">Login</button>
</form>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Login Form</title>
<style>
body {
font-family: 'Arial', sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
background-color: #f5f5f5;
}
.container {
background-color: #fff;
border: 1px solid #ccc;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 300px;
text-align: center;
position: relative;
}
.container label {
display: block;
text-align: left;
margin-bottom: 8px;
font-weight: bold ;
}
.container input {
width: 100%;
padding: 10px;
margin: 8px 0;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 4px;
}
button, .container button {
background-color: #2b80ff;
color: white;
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
}
.container button:hover {
background-color: #0066ff;
}
</style>
</head>
<body>
<div class="container">
<h2>Login Form</h2>
<form id="loginForm">
<label for="username">Username:</label>
<input type="text" id="username"
placeholder="Enter your username" required>
<label for="password">Password:</label>
<input type="password" id="password"
placeholder="Enter your password" required>
<button type="submit">Login</button>
</form>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Login Form</title>
<style>
body {
font-family: 'Arial', sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
background-color: #f5f5f5;
}
.container {
background-color: #fff;
border: 1px solid #ccc;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 300px;
text-align: center;
position: relative;
}
.container label {
display: block;
text-align: left;
margin-bottom: 8px;
font-weight: bold ;
}
.container input {
width: 100%;
padding: 10px;
margin: 8px 0;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 4px;
}
button, .container button {
background-color: #2b80ff;
color: white;
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
}
.container button:hover {
background-color: #0066ff;
}
</style>
</head>
<body>
<div class="container">
<h2>Login Form</h2>
<form id="loginForm">
<label for="username">Username:</label>
<input type="text" id="username"
placeholder="Enter your username" required>
<label for="password">Password:</label>
<input type="password" id="password"
placeholder="Enter your password" required>
<button type="submit">Login</button>
</form>
</div>
</body>
</html>
Output
