Table of Contents
1. Introduction of Creating the Registration Form
In today’s web-centric world, a well-designed registration form is the gateway to user engagement on any digital platform. We’re here to guide you through creating a sleek and responsive registration form using the utility-first CSS framework, Tailwind CSS, and vanilla JavaScript for client-side validation.
2. Setting Up the Environment:
Before we dive into coding, ensure you have Tailwind CSS and Font Awesome for icons included in your project:
<!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>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<style>
</style>
</head>3. Building the Form Structure:
Let’s start by creating the HTML structure for our registration form:
<body class="bg-gray-200 flex items-center justify-center h-screen">
<div class="bg-white p-8 rounded-lg shadow-md w-full max-w-md">
<h1 class="text-2xl font-semibold text-center mb-6">Registration</h1>
<!-- form will go here -->
</div>
</body>
4. Adding Form Fields with Tailwind CSS:
We’ll add input fields with icons using Tailwind’s utility classes for a polished look:
<!-- form -->
<form id="registrationForm" class="space-y-4">
<div class="relative">
<i class="fas fa-user form-icon"></i>
<input type="text" id="firstName" placeholder="First Name" class="input-field w-full border-2 border-gray-300 p-2 rounded" required>
</div>
<!-- Additional fields follow the same pattern -->
</form>
5. Styling with Tailwind CSS and Custom Styles:
Our form icons need some custom styling for positioning, which we add in the <head> of our HTML:
<style>
.form-icon {
position: absolute;
z-index: 10;
display: block;
width: 2.5rem;
height: 2.5rem;
line-height: 2.5rem;
text-align: center;
pointer-events: none;
color: #6b7280;
}
.input-field {
text-indent: 2.5rem;
}
</style>
6. JavaScript Validation
We want our users to enter the information correctly. Let’s add some JavaScript for real-time form validation:
<script>
document.getElementById('registrationForm').addEventListener('submit', function(event) {
event.preventDefault();
var firstName = document.getElementById('firstName').value;
var lastName = document.getElementById('lastName').value;
var department = document.getElementById('department').value;
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;
var confirmPassword = document.getElementById('confirmPassword').value;
var email = document.getElementById('email').value;
var contactNumber = document.getElementById('contactNumber').value;
if (!firstName || !lastName || !department || !username || !password || !confirmPassword || !email || !contactNumber) {
alert('Please fill all fields.');
return false;
}
if (password !== confirmPassword) {
alert('Passwords do not match.');
return false;
}
alert('Registration successful!');
});
</script>7. The Complete Code
Below is the complete HTML document containing the structure, styling, and script for our Tailwind CSS-based registration form.
<!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>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<style>
.form-icon {
position: absolute;
z-index: 10;
display: block;
width: 2.5rem;
height: 2.5rem;
line-height: 2.5rem;
text-align: center;
pointer-events: none;
color: #6b7280;
}
.input-field {
text-indent: 2.5rem;
}
</style>
</head>
<body class="bg-gray-200 flex items-center justify-center h-screen">
<div class="bg-white p-8 rounded-lg shadow-md w-full max-w-md">
<h1 class="text-2xl font-semibold text-center mb-6">Registration</h1>
<form id="registrationForm" class="space-y-4">
<div class="relative">
<i class="fas fa-user form-icon"></i>
<input type="text" id="firstName" placeholder="First Name" class="input-field w-full border-2 border-gray-300 p-2 rounded" required>
</div>
<div class="relative">
<i class="fas fa-user form-icon"></i>
<input type="text" id="lastName" placeholder="Last Name" class="input-field w-full border-2 border-gray-300 p-2 rounded" required>
</div>
<div>
<select id="department" class="w-full border-2 border-gray-300 p-2 rounded" required>
<option value="">Select your Department/Office</option>
<option value="option1">Option1</option>
<option value="option2">Option2</option>
<option value="option3">Option3</option>
</select>
</div>
<div class="relative">
<i class="fas fa-user form-icon"></i>
<input type="text" id="username" placeholder="Username" class="input-field w-full border-2 border-gray-300 p-2 rounded" required>
</div>
<div class="relative">
<i class="fas fa-lock form-icon"></i>
<input type="password" id="password" placeholder="Password" class="input-field w-full border-2 border-gray-300 p-2 rounded" required>
</div>
<div class="relative">
<i class="fas fa-lock form-icon"></i>
<input type="password" id="confirmPassword" placeholder="Confirm Password" class="input-field w-full border-2 border-gray-300 p-2 rounded" required>
</div>
<div class="relative">
<i class="fas fa-envelope form-icon"></i>
<input type="email" id="email" placeholder="E-Mail Address" class="input-field w-full border-2 border-gray-300 p-2 rounded" required>
</div>
<div class="relative">
<i class="fas fa-phone form-icon"></i>
<input type="tel" id="contactNumber" placeholder="(639)" class="input-field w-full border-2 border-gray-300 p-2 rounded" required>
</div>
<button type="submit" class="w-full bg-orange-500 text-white p-2 rounded hover:bg-orange-600">SUBMIT</button>
</form>
</div>
<script>
document.getElementById('registrationForm').addEventListener('submit', function(event) {
event.preventDefault();
var firstName = document.getElementById('firstName').value;
var lastName = document.getElementById('lastName').value;
var department = document.getElementById('department').value;
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;
var confirmPassword = document.getElementById('confirmPassword').value;
var email = document.getElementById('email').value;
var contactNumber = document.getElementById('contactNumber').value;
if (!firstName || !lastName || !department || !username || !password || !confirmPassword || !email || !contactNumber) {
alert('Please fill all fields.');
return false;
}
if (password !== confirmPassword) {
alert('Passwords do not match.');
return false;
}
alert('Registration successful!');
// Reset the form or redirect the user
document.getElementById('registrationForm').reset();
});
</script>
</body>
</html>8. Conclusion
With the form created and styling applied, you have a modern and responsive registration form. This guide has walked you through each step, integrating Tailwind CSS’s utility classes with custom styling and adding JavaScript to ensure form data is correctly captured.
9. Final Thoughts:
Understanding the intricacies of Tailwind CSS and JavaScript can significantly impact your user interface and experience. By following this guide, you’ve equipped yourself with the knowledge to implement similar patterns in future projects. Happy coding!
1 Comment
Pingback: Top 1 Spring Boot REST API CRUD Example With MySQL Database - Tech Masters Lab