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

Introduction

In this tutorial, you'll learn how to create a fully functional login form using HTML, CSS, and JavaScript. This form will be responsive and well-styled and capture user inputs for both the username and password. Upon submission, we will print the form data to the console.

Development Steps

Create Basic HTML Structure: Build the structure with input fields for the username and password.
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 a Basic HTML Structure

We will start by creating the basic structure of the login form. The form will include fields for username and password and a submit button.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Complete Login Form</title>
</head>
<body>

    <!-- Step 1: Login form -->
    <div class="login-container">
        <form class="login-form" id="loginForm">
            <h2>Login</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="password">Password</label>
                <input type="password" id="password" placeholder="Enter your password" required>
            </div>
            <button type="submit" class="btn">Login</button>
        </form>
    </div>

</body>
</html>

Explanation:

The <form> contains two input fields for the username and password.
The submit button with class btn will trigger the form submission.

Step 2: Style the Form with CSS

Now, we'll style the form to make it responsive and visually appealing. We'll add padding, rounded corners, 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;
        }

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

        .login-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: #3498db;
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .btn:hover {
            background-color: #2980b9;
        }

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

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

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

            .login-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 a shadow for depth and padding for spacing.
Responsiveness: The form adjusts for smaller screens using media queries.

Step 3: Handle Form Submission with JavaScript

Finally, we’ll add a JavaScript function to capture the data entered in the form and print it to the console when the form is submitted.

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

            // Capture the input values
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;

            // Print the values to the console
            console.log('Username:', username);
            console.log('Password:', password);
        });
    </script>
</body>

Explanation:

event.preventDefault(): Stops the form from submitting and refreshing the page.
console.log(): Displays the entered username and password in the browser’s console for testing purposes.

Complete Example

Here’s the full code for a login 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 Login 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;
        }

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

        .login-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: #3498db;
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .btn:hover {
            background-color: #2980b9;
        }

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

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

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

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

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

    <!-- Step 1: Login form -->
    <div class="login-container">
        <form class="login-form" id="loginForm">
            <h2>Login</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="password">Password</label>
                <input type="password" id="password" placeholder="Enter your password" required>
            </div>
            <button type="submit" class="btn">Login</button>
        </form>
    </div>

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

            // Capture the input values
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;

            // Print the values to the console
            console.log('Username:', username);
            console.log('Password:', password);
        });
    </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 guide, you created a responsive login form using HTML, CSS, and JavaScript. The form captures user inputs and prints them to the console upon submission. You can extend this functionality by adding validation or sending the form data to a server for authentication.

Java Guides

Search This Blog