Simple Login Page with Validation Using HTML, CSS, and JavaScript
Published on January 10, 2025
In this post, we'll walk you through creating a simple login page using HTML, CSS, and JavaScript. The form will have fields for the username and password, along with a login button. We’ll also add basic JavaScript validation to ensure the fields are not empty and provide feedback to the user if they enter incorrect credentials. This is a great starting point for understanding form validation in web development.
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="login-container">
<h2>Login</h2>
<form id="loginForm">
<label for="username">Username</label>
<input type="text" id="username" name="username" placeholder="Enter your username" required>
<label for="password">Password</label>
<input type="password" id="password" name="password" placeholder="Enter your password" required>
<button type="submit">Login</button>
</form>
<div id="responseMessage"></div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS Code
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.login-container {
background: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
width: 300px;
text-align: center;
}
h2 {
color: #333;
}
label {
display: block;
margin-bottom: 5px;
color: #555;
}
input {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 14px;
}
button {
background: #007bff;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
width: 100%;
font-size: 16px;
}
button:hover {
background: #0056b3;
}
JavaScript Code
document.getElementById("loginForm").addEventListener("submit", function (e) {
e.preventDefault();
const username = document.getElementById("username").value;
const password = document.getElementById("password").value;
// Example of hardcoded login details
const correctUsername = "user123";
const correctPassword = "password123";
if (username === correctUsername && password === correctPassword) {
document.getElementById("responseMessage").textContent = "Login successful!";
document.getElementById("responseMessage").style.color = "green";
} else {
document.getElementById("responseMessage").textContent = "Incorrect username or password.";
document.getElementById("responseMessage").style.color = "red";
}
});
How It Works
1. **HTML**: The login form contains two fields: one for the username and one for the password. Both fields are required, and the form has a submit button. 2. **CSS**: The form is styled with a minimalistic design, using a centered layout with a white background and blue button to make it user-friendly. 3. **JavaScript**: The script checks whether the entered username and password match the predefined correct values. If they do, a success message appears, otherwise an error message is displayed. This simulates a basic login system, but in a real-world application, user authentication would be handled by a server.
Join the conversation