HTML Sign Up Form

Last Updated : 25 Jun, 2024

The HTML SignUp form is a user interface component comprising input fields for capturing personal information such as name, email, password, typically styled with CSS for presentation and validation.

Approach

Form Structure: The HTML form includes fields for username, email, password, and confirm password, with a submit button to send the data.
Styling: CSS styles are applied to make the form visually appealing, including a centered container with padding, rounded corners, and shadow effects. Input fields and buttons are styled for better user interaction.
Password Validation: JavaScript is used to validate the password against specific criteria: at least 8 characters, one uppercase letter, one lowercase letter, one number, and one special character.
Password Strength Indicator: As the user types the password, a strength indicator dynamically shows if the password is weak, medium, or strong, helping users create secure passwords.
Error Handling and Messages: Error messages are displayed if the password does not meet the criteria or if the password and confirmation do not match. A success message is shown upon successful signup.

Example: This example shows the implementation of the above-explained approach.

HTML

<!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>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        .container {
            background-color: white;
            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;
        }

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

        label {
            display: block;
            margin-bottom: 5px;
        }

        input {
            width: 100%;
            padding: 8px;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        button {
            width: 100%;
            padding: 10px;
            background-color: #5cb85c;
            border: none;
            color: white;
            border-radius: 4px;
            cursor: pointer;
        }

        button:hover {
            background-color: #4cae4c;
        }

        #message {
            margin-top: 20px;
            text-align: center;
        }

        .error {
            color: red;
            font-size: 0.9em;
        }

        .password-hint {
            font-size: 0.9em;
            color: #666;
            margin-top: 5px;
            display: none;
        }

        .password-strength {
            margin-top: 5px;
        }

        .password-strength div {
            height: 5px;
            border-radius: 4px;
        }

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

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

        .strong {
            width: 100%;
            background-color: green;
        }
    </style>
</head>

<body>
    <div class="container">
        <h2>Signup Form</h2>
        <form id="signupForm">
            <div class="form-group">
                <label for="username">Username</label>
                <input type="text" id="username" name="username" required>
            </div>
            <div class="form-group">
                <label for="email">Email</label>
                <input type="email" id="email" name="email" required>
            </div>
            <div class="form-group">
                <label for="password">Password</label>
                <input type="password" id="password" name="password" required>
                <div class="password-hint" id="passwordHint">
                    Password must be at least 8 characters long, and include at
                    least one uppercase letter, one lowercase letter, one
                    number, and one special character.
                </div>
                <span id="passwordError" class="error"></span>
                <div class="password-strength" id="passwordStrength"></div>
            </div>
            <div class="form-group">
                <label for="confirmPassword">Confirm Password</label>
                <input type="password" id="confirmPassword"
                    name="confirmPassword" required>
                <span id="confirmPasswordError" class="error"></span>
            </div>
            <button type="submit">Signup</button>
        </form>
        <p id="message"></p>
    </div>
    <script>
        document.getElementById('signupForm').addEventListener('submit', function (event) {
            event.preventDefault();

            let username = document.getElementById('username').value;
            let email = document.getElementById('email').value;
            let password = document.getElementById('password').value;
            let confirmPassword = document.getElementById('confirmPassword').value;
            let message = document.getElementById('message');
            let passwordError = document.getElementById('passwordError');
            let confirmPasswordError = document.getElementById('confirmPasswordError');

            let passwordValid = validatePassword(password);
            if (!passwordValid) {
                passwordError.textContent = 'Password does not meet the requirements.';
                return;
            } else {
                passwordError.textContent = '';
            }

            if (password !== confirmPassword) {
                confirmPasswordError.textContent = 'Passwords do not match!';
                return;
            } else {
                confirmPasswordError.textContent = '';
            }

            // Here you can add code to send the form data to the server

            message.style.color = 'green';
            message.textContent = 'Signup successful!';
        });

        document.getElementById('password').addEventListener('focus', function () {
            document.getElementById('passwordHint').style.display = 'block';
        });

        document.getElementById('password').addEventListener('blur', function () {
            document.getElementById('passwordHint').style.display = 'none';
        });

        document.getElementById('password').addEventListener('input', function () {
            let password = this.value;
            let passwordStrength = document.getElementById('passwordStrength');
            let strength = getPasswordStrength(password);

            passwordStrength.innerHTML = ''; // Clear previous strength bars
            if (strength) {
                let strengthBar = document.createElement('div');
                strengthBar.className = strength;
                passwordStrength.appendChild(strengthBar);
            }
        });

        function validatePassword(password) {
            let regex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
            return regex.test(password);
        }

        function getPasswordStrength(password) {
            if (password.length < 8) {
                return 'weak';
            }
            if (password.match(/(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])/)) {
                return 'strong';
            }
            return 'medium';
        }
    </script>
</body>

</html>