Simple Registration Page Using HTML, CSS, and JavaScript
Published on January 8, 2025
Creating a registration page is an essential feature for any website where users need to sign up for accounts. In this post, we will walk through creating a simple registration page using HTML, CSS, and JavaScript. This form will allow users to enter their details, such as username, email, password, and confirm the password, and submit the form. We will also validate the data using JavaScript to ensure everything is correct before submission.
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration Form</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="form-container">
<h2>Register Here</h2>
<form id="registrationForm">
<label for="username">Username</label>
<input type="text" id="username" name="username" placeholder="Enter Username" required>
<label for="email">Email</label>
<input type="email" id="email" name="email" placeholder="Enter Email" required>
<label for="password">Password</label>
<input type="password" id="password" name="password" placeholder="Enter Password" required>
<label for="confirmPassword">Confirm Password</label>
<input type="password" id="confirmPassword" name="confirmPassword" placeholder="Confirm Password" required>
<button type="submit">Register</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;
}
.form-container {
background: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
width: 400px;
text-align: left;
}
h2 {
color: #333;
text-align: center;
}
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("registrationForm").addEventListener("submit", function (e) {
e.preventDefault();
const username = document.getElementById("username").value;
const email = document.getElementById("email").value;
const password = document.getElementById("password").value;
const confirmPassword = document.getElementById("confirmPassword").value;
if (password !== confirmPassword) {
document.getElementById("responseMessage").textContent = "Passwords do not match!";
document.getElementById("responseMessage").style.color = "red";
} else if (username && email && password && confirmPassword) {
document.getElementById("responseMessage").textContent = "Registration successful!";
document.getElementById("responseMessage").style.color = "green";
this.reset();
} else {
document.getElementById("responseMessage").textContent = "Please fill in all fields.";
document.getElementById("responseMessage").style.color = "red";
}
});
How It Works
1. **HTML**: The form contains four input fields: one for the username, one for the email, one for the password, and one for confirming the password. A button is provided to submit the form. 2. **CSS**: The form is styled with a modern, clean design. The form fields and the submit button are made responsive and visually appealing to users. 3. **JavaScript**: The script checks if the password and confirm password fields match. If they do, the form will show a success message; otherwise, it will display an error message. If any field is empty, an error message prompts the user to fill in the missing information.
Join the conversation