How to Create Register Form with HTML, CSS, and JavaScript

Introduction

A registration form collects user information to create an account on a website. In this tutorial, you'll learn how to create a registration form using HTML, CSS for styling, and JavaScript for handling form submission. We will capture and print the data entered into the form to the console.

Development Steps

Create Basic HTML Structure: Set up the form with fields for name, email, password, and confirmation.
Style the Form with CSS: Use CSS to create a responsive and modern form layout.
Handle Form Submission with JavaScript: Capture form data using JavaScript and log it to the console.

Step 1: Create a Basic HTML Structure

We’ll create the basic structure of the registration form with fields for the user's name, 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>Register Form</title>
</head>
<body>

    <!-- Step 1: Registration form -->
    <div class="register-container">
        <form class="register-form" id="registerForm">
            <h2>Register</h2>
            <div class="input-group">
                <label for="name">Name</label>
                <input type="text" id="name" placeholder="Enter your name" 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">Register</button>
        </form>
    </div>

</body>
</html>

Explanation:

The form includes fields for the user's name, email, password, and password confirmation.
The form also includes a submit button labeled "Register" for submission.

Step 2: Style the Form with CSS

Next, we’ll style the form to make it visually appealing and responsive.

<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;
        }

        .register-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;
        }

        .register-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) {
            .register-container {
                padding: 20px;
            }

            .input-group input, .btn {
                font-size: 14px;
                padding: 8px;
            }
        }

        @media (max-width: 480px) {
            .register-container {
                padding: 15px;
            }

            .register-form h2 {
                font-size: 18px;
            }

            .input-group input, .btn {
                font-size: 12px;
                padding: 6px;
            }
        }
    </style>
</head>

Explanation:

General Styles: The form is centered with padding, rounded corners, and a shadow for better design.
Responsive Design: The form adjusts for smaller devices using media queries, making the form look good on all screen sizes.

Step 3: Handle Form Submission with JavaScript

We’ll add a JavaScript function to handle the form submission, capture the input values, and log them to the console.

<body>
    <script>
        // Step 3: Handle form submission
        document.getElementById('registerForm').addEventListener('submit', function(event) {
            event.preventDefault(); // Prevent the form from refreshing the page

            // Capture the input values
            const name = document.getElementById('name').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('Name:', name);
            console.log('Email:', email);
            console.log('Password:', password);
            console.log('Confirm Password:', confirmPassword);
        });
    </script>
</body>

Explanation:

event.preventDefault(): Prevents the page from refreshing when the form is submitted.
console.log(): Logs the user's input (name, email, password, and confirm password) to the console.

Complete Example

Here’s the full code for the register form, combining 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>Register 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;
        }

        .register-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;
        }

        .register-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) {
            .register-container {
                padding: 20px;
            }

            .input-group input, .btn {
                font-size: 14px;
                padding: 8px;
            }
        }

        @media (max-width: 480px) {
            .register-container {
                padding: 15px;
            }

            .register-form h2 {
                font-size: 18px;
            }

            .input-group input, .btn {
                font-size: 12px;
                padding: 6px;
            }
        }
    </style>
</head>
<body>

    <!-- Step 1: Registration form -->
    <div class="register-container">
        <form class="register-form" id="registerForm">
            <h2>Register</h2>
            <div class="input-group">
                <label for="name">Name</label>
                <input type="text" id="name" placeholder="Enter your name" 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">Register</button>
        </form>
    </div>

    <script>
        // Step 3: Handle form submission
        document.getElementById('registerForm').addEventListener('submit', function(event) {
            event.preventDefault(); // Prevent the form from refreshing the page

            // Capture the input values
            const name = document.getElementById('name').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('Name:', name);
            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 registration form using HTML, CSS, and JavaScript. The form collects user data, including name, email, password, and password confirmation, and prints it to the console. You can further enhance this form by adding validation or connecting it to a backend to store the information.

Java Guides

Search This Blog