Introduction
A sign-up form is essential for collecting user information when they create an account on a website. In this tutorial, you'll learn how to create a complete sign-up form using HTML, CSS for design, and JavaScript to handle form submission and log the user data to the console.
Development Steps
- Create Basic HTML Structure: Build the form structure with fields for username, email, password, and confirmation.
- Style the Form with CSS: Apply CSS for a modern, responsive layout.
- Handle Form Submission with JavaScript: Capture the form data using JavaScript and print it to the console.
Step 1: Create Basic HTML Structure
We’ll create the basic structure of a sign-up form with fields for username, email, password, and password confirmation.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Complete Sign-Up Form</title>
</head>
<body>
<!-- Step 1: Sign-up form -->
<div class="signup-container">
<form class="signup-form" id="signupForm">
<h2>Sign Up</h2>
<div class="input-group">
<label for="username">Username</label>
<input type="text" id="username" placeholder="Enter your username" required>
</div>
<div class="input-group">
<label for="email">Email</label>
<input type="email" id="email" placeholder="Enter your email" required>
</div>
<div class="input-group">
<label for="password">Password</label>
<input type="password" id="password" placeholder="Enter your password" required>
</div>
<div class="input-group">
<label for="confirm-password">Confirm Password</label>
<input type="password" id="confirm-password" placeholder="Confirm your password" required>
</div>
<button type="submit" class="btn">Sign Up</button>
</form>
</div>
</body>
</html>
Explanation:
- The form includes fields for username, email, password, and password confirmation.
- The
signupFormis wrapped inside adivcontainer for easy styling.
Step 2: Style the Form with CSS
Next, we’ll style the sign-up form to make it responsive and visually appealing. We’ll add padding, borders, and adjust the layout for different screen sizes.
<head>
<style>
/* General form styles */
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f4f4f4;
}
.signup-container {
background-color: white;
padding: 40px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 400px;
}
.signup-form h2 {
margin-bottom: 20px;
text-align: center;
}
.input-group {
margin-bottom: 20px;
}
.input-group label {
display: block;
margin-bottom: 5px;
font-size: 14px;
}
.input-group input {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 16px;
}
.btn {
width: 100%;
padding: 10px;
background-color: #2ecc71;
color: white;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.btn:hover {
background-color: #27ae60;
}
@media (max-width: 768px) {
.signup-container {
padding: 20px;
}
.input-group input, .btn {
font-size: 14px;
padding: 8px;
}
}
@media (max-width: 480px) {
.signup-container {
padding: 15px;
}
.signup-form h2 {
font-size: 18px;
}
.input-group input, .btn {
font-size: 12px;
padding: 6px;
}
}
</style>
</head>
Explanation:
- Layout: The form is centered on the page with padding and rounded corners.
- Responsiveness: The form adapts to different screen sizes using media queries for mobile and tablet devices.
Step 3: Handle Form Submission with JavaScript
We’ll add a JavaScript function to capture the entered data when the form is submitted and log it to the console.
<body>
<script>
// Step 3: Handle form submission
document.getElementById('signupForm').addEventListener('submit', function(event) {
event.preventDefault(); // Prevent the form from refreshing the page
// Capture the input values
const username = document.getElementById('username').value;
const email = document.getElementById('email').value;
const password = document.getElementById('password').value;
const confirmPassword = document.getElementById('confirm-password').value;
// Print the values to the console
console.log('Username:', username);
console.log('Email:', email);
console.log('Password:', password);
console.log('Confirm Password:', confirmPassword);
});
</script>
</body>
Explanation:
event.preventDefault(): Prevents the form from refreshing the page when submitted.console.log(): Logs the entered username, email, password, and confirmation password in the browser’s console.
Complete Example
Below is the complete code for the sign-up form, including HTML, CSS, and JavaScript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Complete Sign-Up Form</title>
<style>
/* General form styles */
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f4f4f4;
}
.signup-container {
background-color: white;
padding: 40px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 400px;
}
.signup-form h2 {
margin-bottom: 20px;
text-align: center;
}
.input-group {
margin-bottom: 20px;
}
.input-group label {
display: block;
margin-bottom: 5px;
font-size: 14px;
}
.input-group input {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 16px;
}
.btn {
width: 100%;
padding: 10px;
background-color: #2ecc71;
color: white;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.btn:hover {
background-color: #27ae60;
}
@media (max-width: 768px) {
.signup-container {
padding: 20px;
}
.input-group input, .btn {
font-size: 14px;
padding: 8px;
}
}
@media (max-width: 480px) {
.signup-container {
padding: 15px;
}
.signup-form h2 {
font-size: 18px;
}
.input-group input, .btn {
font-size: 12px;
padding: 6px;
}
}
</style>
</head>
<body>
<!-- Step 1: Sign-up form -->
<div class="signup-container">
<form class="signup-form" id="signupForm">
<h2>Sign Up</h2>
<div class="input-group">
<label for="username">Username</label>
<input type="text" id="username" placeholder="Enter your username" required>
</div>
<div class="input-group">
<label for="email">Email</label>
<input type="email" id="email" placeholder="Enter your email" required>
</div>
<div class="input-group">
<label for="password">Password</label>
<input type="password" id="password" placeholder="Enter your password" required>
</div>
<div class="input-group">
<label for="confirm-password">Confirm Password</label>
<input type="password" id="confirm-password" placeholder="Confirm your password" required>
</div>
<button type="submit" class="btn">Sign Up</button>
</form>
</div>
<script>
// Step 3: Handle form submission
document.getElementById('signupForm').addEventListener('submit', function(event) {
event.preventDefault(); // Prevent the form from refreshing the page
// Capture the input values
const username = document.getElementById('username').value;
const email = document.getElementById('email').value;
const password = document.getElementById('password').value;
const confirmPassword = document.getElementById('confirm-password').value;
// Print the values to the console
console.log('Username:', username);
console.log('Email:', email);
console.log('Password:', password);
console.log('Confirm Password:', confirmPassword);
});
</script>
</body>
</html>
Output
You can play with the above HTML in Online HTML Editor and Compiler. Here is the output of the above HTML page.:
Conclusion
In this tutorial, you learned how to create a complete sign-up form using HTML, CSS, and JavaScript. The form captures user input for username, email, password, and password confirmation, and logs the data to the console. You can extend the functionality by adding validation or sending the data to a server for processing.
Comments
Post a Comment
Leave Comment