How to Create Sign-Up Form with HTML, CSS, and JavaScript

🎓 Top 15 Udemy Courses (80-90% Discount): My Udemy Courses - Ramesh Fadatare — All my Udemy courses are real-time and project oriented courses.

▶️ Subscribe to My YouTube Channel (178K+ subscribers): Java Guides on YouTube

▶️ For AI, ChatGPT, Web, Tech, and Generative AI, subscribe to another channel: Ramesh Fadatare on YouTube

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 signupForm is wrapped inside a div container 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.

My Top and Bestseller Udemy Courses. The sale is going on with a 70 - 80% discount. The discount coupon has been added to each course below:

Spring Boot + RabbitMQ Course - The Practical Guide

Java Guides

Search This Blog