Create Account Page Using HTML, CSS, and Js
Published on December 28, 2024
A "Create Account" page is a vital part of user onboarding for any website or app. In this post, we'll build a responsive "Create Account" page with HTML, CSS, and JavaScript, incorporating a user-friendly interface and form validation.
HTML: Structure of the Create Account Page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Create Account</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="form-container">
<h2>Create Account</h2>
<form id="createAccountForm">
<label for="username">Username:</label>
<input type="text" id="username" name="username" placeholder="Enter your username" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter your email" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" placeholder="Enter your password" required>
<button type="submit">Create Account</button>
</form>
<div id="message"></div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS: Styling the Create Account Page
/* style.css */
body {
font-family: Arial, sans-serif;
background-color: #eef2f7;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.form-container {
background: #ffffff;
padding: 25px;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
width: 350px;
}
h2 {
text-align: center;
margin-bottom: 20px;
color: #444;
}
label {
display: block;
margin-bottom: 5px;
font-size: 14px;
color: #555;
}
input {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 14px;
}
button {
width: 100%;
padding: 10px;
background-color: #0066cc;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
button:hover {
background-color: #004b99;
}
#message {
margin-top: 10px;
color: green;
text-align: center;
font-size: 14px;
}
JavaScript: Adding Form Validation
// script.js
document.getElementById('createAccountForm').addEventListener('submit', function (e) {
e.preventDefault();
const username = document.getElementById('username').value.trim();
const email = document.getElementById('email').value.trim();
const password = document.getElementById('password').value.trim();
if (username && email && password) {
document.getElementById('message').innerText = 'Account created successfully!';
} else {
document.getElementById('message').innerText = 'All fields are required.';
}
});
How It Works
1. HTML: The structure includes fields for username, email, and password, along with a submit button.
2. CSS: Enhances the appearance of the form, making it visually appealing and responsive.
3. JavaScript: Validates that all fields are filled before submission and displays a success message upon completion.
Conclusion
This "Create Account" page template is a useful addition to any website. You can extend it further by connecting it to a backend server for account creation or adding advanced validation techniques for better security and usability.
Join the conversation