How to Create a Registration Form with HTML, CSS, and JavaScript?

by

While I was working on a project, I needed to create a user registration form for a client’s website. Creating forms is one of those fundamental skills that every web developer needs, whether you’re building a simple contact page or a complex user management system.

In this article, I’ll walk you through how to create a professional registration form using HTML, CSS, and JavaScript that not only looks good but also validates user input in real-time.

This form will include all the essential fields and modern validation techniques that I’ve refined over my years of development experience.

Set Up the Basic HTML Structure

First, let’s create the HTML structure for our registration form:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>User Registration Form</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>Create Your Account</h1>
        <form id="registrationForm">
            <div class="form-group">
                <label for="fullName">Full Name</label>
                <input type="text" id="fullName" name="fullName" required>
                <small class="error-message"></small>
            </div>

            <div class="form-group">
                <label for="email">Email Address</label>
                <input type="email" id="email" name="email" required>
                <small class="error-message"></small>
            </div>

            <div class="form-group">
                <label for="password">Password</label>
                <input type="password" id="password" name="password" required>
                <small class="error-message"></small>
            </div>

            <div class="form-group">
                <label for="confirmPassword">Confirm Password</label>
                <input type="password" id="confirmPassword" name="confirmPassword" required>
                <small class="error-message"></small>
            </div>

            <div class="form-group">
                <label for="phone">Phone Number</label>
                <input type="tel" id="phone" name="phone">
                <small class="error-message"></small>
            </div>

            <div class="form-group">
                <label for="address">Address</label>
                <textarea id="address" name="address" rows="3"></textarea>
            </div>

            <div class="form-group checkbox">
                <input type="checkbox" id="terms" name="terms" required>
                <label for="terms">I agree to the Terms and Conditions</label>
                <small class="error-message"></small>
            </div>

            <button type="submit" class="btn">Register</button>
        </form>
    </div>

    <script src="script.js"></script>
</body>
</html>

I executed the above example code and added the screenshot below.

Registration Form with HTML, CSS, and JavaScript

This HTML structure includes all the essential fields for a registration form: full name, email address, password (with confirmation), phone number, address, and a terms checkbox. Each input field is wrapped in a div with the class “form-group” for styling purposes, and includes a label and a small element for displaying error messages.

Read Create Interactive HTML Forms with CSS and JavaScript

Style the Form with CSS

Now, let’s make our form look professional with some CSS:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    background-color: #f5f5f5;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
}

.container {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 500px;
    padding: 30px;
}

h1 {
    text-align: center;
    color: #333;
    margin-bottom: 30px;
    font-weight: 600;
}

.form-group {
    margin-bottom: 20px;
}

label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #555;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    transition: border-color 0.3s;
}

input:focus,
textarea:focus {
    border-color: #4A90E2;
    outline: none;
}

.checkbox {
    display: flex;
    align-items: center;
}

.checkbox input {
    margin-right: 10px;
}

.checkbox label {
    margin-bottom: 0;
}

.error-message {
    color: #e74c3c;
    font-size: 14px;
    margin-top: 5px;
    display: block;
}

.btn {
    background-color: #4A90E2;
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    width: 100%;
    transition: background-color 0.3s;
}

.btn:hover {
    background-color: #357ABD;
}

.input-error {
    border-color: #e74c3c;
}

@media (max-width: 600px) {
    .container {
        padding: 20px;
    }
}

I executed the above example code and added the screenshot below.

Create a Registration Form with HTML, CSS, and JavaScript

This CSS makes our form look clean and professional with a white background, subtle shadows, and smooth transitions for interactive elements. It’s also responsive and will look good on both desktop and mobile devices.

Check out Expandable Table with Collapsible Rows Using HTML, CSS, and JavaScript

Add Form Validation with JavaScript

Finally, let’s add JavaScript to validate the form inputs in real-time:

document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('registrationForm');

    // Regular expressions for validation
    const patterns = {
        fullName: /^[a-zA-Z\s]{2,50}$/,
        email: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
        password: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/,
        phone: /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/
    };

    // Error messages
    const errorMessages = {
        fullName: 'Name must be 2-50 characters and contain only letters and spaces',
        email: 'Please enter a valid email address',
        password: 'Password must be at least 8 characters and include uppercase, lowercase, number and special character',
        confirmPassword: 'Passwords do not match',
        phone: 'Please enter a valid US phone number (e.g., 123-456-7890)',
        terms: 'You must agree to the terms and conditions'
    };

    // Add event listeners to all inputs
    const inputs = form.querySelectorAll('input:not([type="checkbox"])');
    inputs.forEach(input => {
        input.addEventListener('blur', validateField);
        input.addEventListener('input', validateField);
    });

    // Add event listener for checkbox
    const termsCheckbox = document.getElementById('terms');
    termsCheckbox.addEventListener('change', function() {
        validateCheckbox(this);
    });

    // Validate field on input/blur
    function validateField(e) {
        const field = e.target;
        const fieldName = field.getAttribute('name');
        let isValid = true;

        // Remove existing error styles
        field.classList.remove('input-error');
        const errorElement = field.nextElementSibling;
        errorElement.textContent = '';

        // Skip validation if field is empty and not required
        if (!field.value.trim() && !field.hasAttribute('required')) {
            return;
        }

        // Validate based on field name
        switch(fieldName) {
            case 'fullName':
                isValid = patterns.fullName.test(field.value);
                break;
            case 'email':
                isValid = patterns.email.test(field.value);
                break;
            case 'password':
                isValid = patterns.password.test(field.value);
                // Also validate confirm password if it has a value
                const confirmPassword = document.getElementById('confirmPassword');
                if (confirmPassword.value) {
                    validateConfirmPassword(confirmPassword);
                }
                break;
            case 'confirmPassword':
                isValid = validateConfirmPassword(field);
                break;
            case 'phone':
                // Phone is optional, but validate if there's a value
                if (field.value.trim()) {
                    isValid = patterns.phone.test(field.value);
                }
                break;
        }

        // Show error if not valid
        if (!isValid) {
            field.classList.add('input-error');
            errorElement.textContent = errorMessages[fieldName];
        }

        return isValid;
    }

    // Special validation for confirm password
    function validateConfirmPassword(field) {
        const password = document.getElementById('password').value;
        const isValid = field.value === password;

        if (!isValid) {
            field.classList.add('input-error');
            field.nextElementSibling.textContent = errorMessages.confirmPassword;
        } else {
            field.classList.remove('input-error');
            field.nextElementSibling.textContent = '';
        }

        return isValid;
    }

    // Validate checkbox
    function validateCheckbox(checkbox) {
        const errorElement = checkbox.parentElement.querySelector('.error-message');

        if (!checkbox.checked) {
            errorElement.textContent = errorMessages.terms;
            return false;
        } else {
            errorElement.textContent = '';
            return true;
        }
    }

    // Form submission
    form.addEventListener('submit', function(e) {
        e.preventDefault();

        // Validate all fields
        let isFormValid = true;

        inputs.forEach(input => {
            if (!validateField({ target: input })) {
                isFormValid = false;
            }
        });

        // Validate checkbox
        if (!validateCheckbox(termsCheckbox)) {
            isFormValid = false;
        }

        // If form is valid, submit
        if (isFormValid) {
            // Usually you would send the form data to a server here
            alert('Registration successful! Form would be submitted now.');
            // form.submit(); // Uncomment this to actually submit the form

            // For demonstration, let's log the form data
            const formData = new FormData(form);
            const formValues = {};
            for (let [key, value] of formData.entries()) {
                formValues[key] = value;
            }
            console.log('Form Data:', formValues);
        }
    });
});

I executed the above example code and added the screenshot below.

How to Create a Registration Form with HTML, CSS, and JavaScript

This JavaScript code adds real-time validation to our form. It validates each field as the user types or moves away from it, showing clear error messages when the input doesn’t meet the requirements. The validation includes:

  1. Name validation (letters and spaces only)
  2. Email
  3. Email validation using a regular expression
  4. Password validation (requiring at least 8 characters with uppercase, lowercase, numbers, and special characters)
  5. Password confirmation matching
  6. US phone number format validation
  7. Terms and conditions checkbox validation

When the form is submitted, it validates all fields again and either shows error messages or proceeds with submission if everything is valid.

Read Call a JavaScript Function When a Checkbox is Checked or Unchecked

Enhance User Experience with Visual Feedback

Let’s add some additional CSS to provide better visual feedback to users:

/* Add these rules to your existing CSS */
.form-group.success input {
    border-color: #2ecc71;
}

.password-strength {
    height: 5px;
    margin-top: 5px;
    border-radius: 3px;
    transition: width 0.3s;
}

.weak {
    width: 33%;
    background-color: #e74c3c;
}

.medium {
    width: 66%;
    background-color: #f39c12;
}

.strong {
    width: 100%;
    background-color: #2ecc71;
}

.tooltip {
    position: relative;
    display: inline-block;
    margin-left: 5px;
    color: #777;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 250px;
    background-color: #555;
    color: #fff;
    text-align: left;
    border-radius: 6px;
    padding: 10px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 14px;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

Now, let’s update our HTML to include a password strength indicator and some tooltips:

<!-- Update the password field in your HTML -->
<div class="form-group">
    <label for="password">Password</label>
    <div style="display: flex; align-items: center;">
        <input type="password" id="password" name="password" required>
        <span class="tooltip">ⓘ
            <span class="tooltiptext">Password must contain at least 8 characters including uppercase, lowercase, numbers, and special characters.</span>
        </span>
    </div>
    <div class="password-strength"></div>
    <small class="error-message"></small>
</div>

And let’s add password strength checking to our JavaScript:

// Add this function to your existing JavaScript
function checkPasswordStrength(password) {
    const strengthIndicator = document.querySelector('.password-strength');
    
    // Remove any existing classes
    strengthIndicator.classList.remove('weak', 'medium', 'strong');
    
    if (!password) {
        strengthIndicator.style.display = 'none';
        return;
    }
    
    strengthIndicator.style.display = 'block';
    
    // Check password strength
    let strength = 0;
    
    // Length check
    if (password.length >= 8) strength += 1;
    
    // Character type checks
    if (/[A-Z]/.test(password)) strength += 1;
    if (/[a-z]/.test(password)) strength += 1;
    if (/[0-9]/.test(password)) strength += 1;
    if (/[^A-Za-z0-9]/.test(password)) strength += 1;
    
    // Update UI based on strength
    if (strength <= 2) {
        strengthIndicator.classList.add('weak');
    } else if (strength <= 4) {
        strengthIndicator.classList.add('medium');
    } else {
        strengthIndicator.classList.add('strong');
    }
}

// Update your password field event listener
document.getElementById('password').addEventListener('input', function() {
    validateField({ target: this });
    checkPasswordStrength(this.value);
});

Add Form Submission Handling and Success Message

Let’s update our JavaScript to handle form submission and show a success message:

// Update the form submission part in your JavaScript
form.addEventListener('submit', function(e) {
    e.preventDefault();
    
    // Validate all fields
    let isFormValid = true;
    
    inputs.forEach(input => {
        if (!validateField({ target: input })) {
            isFormValid = false;
        }
    });
    
    // Validate checkbox
    if (!validateCheckbox(termsCheckbox)) {
        isFormValid = false;
    }
    
    // If form is valid, submit
    if (isFormValid) {
        // Show loading state
        const submitButton = form.querySelector('button[type="submit"]');
        const originalText = submitButton.textContent;
        submitButton.disabled = true;
        submitButton.textContent = 'Processing...';
        
        // Simulate server request
        setTimeout(() => {
            // Hide form and show success message
            form.innerHTML = `
                <div class="success-message">
                    <svg viewBox="0 0 24 24" width="60" height="60">
                        <path fill="#2ecc71" d="M12,0A12,12,0,1,0,24,12,12,12,0,0,0,12,0Zm6.26,8.57-8,7.83a1,1,0,0,1-1.42,0l-3.1-3.11a1,1,0,0,1,0-1.42,1,1,0,0,1,1.41,0L9.79,15l7.12-7a1,1,0,0,1,1.42,0A1,1,0,0,1,18.26,8.57Z"/>
                    </svg>
                    <h2>Registration Successful!</h2>
                    <p>Thank you for registering with us. We've sent a confirmation email to your inbox.</p>
                    <a href="#" class="btn">Return to Home</a>
                </div>
            `;
            
            // Add styles for success message
            const style = document.createElement('style');
            style.textContent = `
                .success-message {
                    text-align: center;
                    padding: 20px;
                }
                .success-message h2 {
                    color: #2ecc71;
                    margin: 20px 0;
                }
                .success-message p {
                    margin-bottom: 30px;
                    color: #555;
                }
            `;
            document.head.appendChild(style);
            
        }, 1500); // Simulate 1.5 second server delay
    }
});

Read Check if a Checkbox is Checked Using jQuery

Make the Form Accessible

It’s important to make our form accessible to all users. Let’s add ARIA attributes and improve keyboard navigation:

<!-- Update your form tag with ARIA attributes -->
<form id="registrationForm" aria-label="User Registration Form" novalidate>

// Add keyboard accessibility for error messages
// Add this to your existing JavaScript
function makeFormAccessible() {
    // Add ARIA attributes to form elements
    const formGroups = document.querySelectorAll('.form-group');
    
    formGroups.forEach(group => {
        const input = group.querySelector('input, textarea');
        const errorMessage = group.querySelector('.error-message');
        
        if (input && errorMessage) {
            const inputId = input.getAttribute('id');
            const errorId = `${inputId}-error`;
            
            errorMessage.setAttribute('id', errorId);
            input.setAttribute('aria-describedby', errorId);
        }
    });
    
    // Make error messages announced by screen readers
    const validateFieldWithAria = function(e) {
        const field = e.target;
        const result = validateField(e);
        const errorElement = field.nextElementSibling;
        
        if (!result) {
            field.setAttribute('aria-invalid', 'true');
        } else {
            field.removeAttribute('aria-invalid');
        }
        
        return result;
    };
    
    // Replace event listeners
    inputs.forEach(input => {
        input.removeEventListener('blur', validateField);
        input.removeEventListener('input', validateField);
        
        input.addEventListener('blur', validateFieldWithAria);
        input.addEventListener('input', validateFieldWithAria);
    });
}

// Call this function after the DOM is loaded
document.addEventListener('DOMContentLoaded', function() {
    // ... existing code ...
    makeFormAccessible();
});

Creating a registration form might seem simple, but paying attention to these details makes a huge difference in user experience and conversion rates.

I hope this tutorial helps you create professional registration forms for your web applications. Remember that a well-designed form is often the first interaction users have with your service, so make it count!

Other tutorials:

51 Python Programs

51 PYTHON PROGRAMS PDF FREE

Download a FREE PDF (112 Pages) Containing 51 Useful Python Programs.

pyython developer roadmap

Aspiring to be a Python developer?

Download a FREE PDF on how to become a Python developer.

Let’s be friends

Be the first to know about sales and special discounts.