Designing a Responsive Signup Form Using HTML, CSS, and JavaScript
Published on December 27, 2024
Signup forms are essential for creating user accounts on websites. In this post, we'll create a responsive signup form using HTML, CSS, and JavaScript, complete with validation to ensure a smooth user experience.
HTML: Structure of the Signup Form
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Signup Form</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="form-container">
<h2>Signup</h2>
<form id="signupForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Enter your name" 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">Signup</button>
</form>
<div id="message"></div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS: Styling the Signup Form
/* style.css */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.form-container {
background: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 300px;
}
h2 {
margin-bottom: 20px;
text-align: center;
color: #333;
}
label {
display: block;
margin-bottom: 5px;
color: #666;
}
input {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
width: 100%;
padding: 10px;
background-color: #007BFF;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
#message {
margin-top: 10px;
color: green;
text-align: center;
}
JavaScript: Adding Form Validation
// script.js
document.getElementById('signupForm').addEventListener('submit', function (e) {
e.preventDefault();
const name = document.getElementById('name').value.trim();
const email = document.getElementById('email').value.trim();
const password = document.getElementById('password').value.trim();
if (name && email && password) {
document.getElementById('message').innerText = 'Signup successful!';
} else {
document.getElementById('message').innerText = 'Please fill out all fields.';
}
});
How It Works
1. HTML: Provides the structure for the signup form with input fields for name, email, and password.
2. CSS: Styles the form, ensuring a clean and modern look with a responsive design.
3. JavaScript: Validates the form fields and displays a success message when all fields are filled out correctly.
Conclusion
This responsive signup form is perfect for any website or application. You can customize it further to include more fields, integrate it with a backend server, or add advanced validation techniques for a better user experience.
Join the conversation