Create a Signup Page with Validation Using HTML, CSS, and JavaScript
Published on December 25, 2024
A signup page is essential for user registration in web applications. In this post, we will create a modern signup page with input validation using HTML for structure, CSS for styling, and JavaScript for functionality. Let's dive in!
HTML: Structure of the Signup Page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Signup Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="signup-container">
<form id="signup-form">
<h2>Signup</h2>
<div class="input-group">
<label for="email">Email</label>
<input type="email" id="email" name="email" required>
</div>
<div class="input-group">
<label for="password">Password</label>
<input type="password" id="password" name="password" required>
</div>
<div class="input-group">
<label for="confirm-password">Confirm Password</label>
<input type="password" id="confirm-password" name="confirm-password" required>
</div>
<button type="submit">Signup</button>
<p id="error-message"></p>
</form>
</div>
<script src="script.js"></script>
</body>
</html>
CSS: Styling the Signup Page
body {
font-family: Arial, sans-serif;
background-color: #f9f9f9;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.signup-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: #007BFF;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
#error-message {
color: red;
text-align: center;
font-size: 14px;
}
JavaScript: Adding Validation to the Signup Page
document.getElementById("signup-form").addEventListener("submit", function(event) {
event.preventDefault();
const email = document.getElementById("email").value;
const password = document.getElementById("password").value;
const confirmPassword = document.getElementById("confirm-password").value;
// Validation logic
if (password !== confirmPassword) {
document.getElementById("error-message").textContent = "Passwords do not match!";
} else if (password.length < 6) {
document.getElementById("error-message").textContent = "Password must be at least 6 characters!";
} else {
document.getElementById("error-message").textContent = "Signup successful!";
document.getElementById("error-message").style.color = "green";
}
});
How It Works
1. HTML (Structure): Defines the layout of the signup form with fields for email, password, and confirm password.
2. CSS (Styling): Styles the form to make it visually appealing, adding colors, padding, and hover effects for the button.
3. JavaScript (Validation): Checks if:
- Passwords match.
- Password meets minimum length requirements.
Validation messages are displayed in real-time to improve user experience.
Conclusion
This post demonstrates how to create a functional signup page with real-time validation. You can extend this by connecting the form to a backend server for actual user registration. Try implementing this in your next project!
Join the conversation