Create a Login Form Using HTML, CSS, and JavaScript
Published on December 25, 2024
Creating a login form is a fundamental task in web development. In this post, we'll show you how to create a simple login form using HTML, style it with CSS, and add basic validation with JavaScript. This form will consist of a username, password input, and a submit button. Let's dive into it!
HTML: The Structure of the Login Form
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Form</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="login-container">
<form id="login-form">
<h2>Login</h2>
<div class="input-group">
<label for="username">Username</label>
<input type="text" id="username" name="username" required>
</div>
<div class="input-group">
<label for="password">Password</label>
<input type="password" id="password" name="password" required>
</div>
<button type="submit">Login</button>
<p id="error-message"></p>
</form>
</div>
<script src="script.js"></script>
</body>
</html>
CSS: Styling the Login Form
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.login-container {
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 300px;
}
h2 {
text-align: center;
color: #333;
}
.input-group {
margin-bottom: 15px;
}
label {
display: block;
color: #555;
}
input {
width: 100%;
padding: 8px;
margin-top: 5px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
#error-message {
color: red;
text-align: center;
font-size: 14px;
}
JavaScript: Adding Basic Validation
document.getElementById("login-form").addEventListener("submit", function(event) {
event.preventDefault();
// Get the values from the input fields
const username = document.getElementById("username").value;
const password = document.getElementById("password").value;
// Simple validation
if (username === "" || password === "") {
document.getElementById("error-message").textContent = "Both fields are required!";
} else if (username === "admin" && password === "1234") {
document.getElementById("error-message").textContent = "Login successful!";
document.getElementById("error-message").style.color = "green";
} else {
document.getElementById("error-message").textContent = "Invalid username or password!";
document.getElementById("error-message").style.color = "red";
}
});
How It Works
1. HTML (Structure): The HTML code defines the structure of the login form, including:
- A username input field (<input type="text">)
- A password input field (<input type="password">)
- A submit button (<button type="submit">)
- A paragraph element (<p>) for displaying error messages.
2. CSS (Styling): The CSS is used to style the form. It centers the form on the page, adds padding, sets up a box-shadow for the form, and applies styling to the input fields and button. The hover effect on the button makes it visually interactive.
3. JavaScript (Functionality): The JavaScript code is responsible for adding interactivity to the form:
- It listens for the form's
submitevent. - When the user submits the form, the default behavior is prevented using
event.preventDefault()to avoid page refresh. - The values entered in the username and password fields are validated.
- If either field is empty, an error message appears.
- If the credentials are "admin" and "1234", a success message is displayed.
- If the credentials are incorrect, an error message is shown.
Conclusion
This simple login form demonstrates the use of HTML for structure, CSS for styling, and JavaScript for basic form validation. With this basic setup, you can easily extend the functionality to connect to a backend for real authentication, add password encryption, or improve the user interface with additional features.
By following this guide, you should now be able to create a basic login form, style it to look modern, and add simple validation with JavaScript.
Join the conversation