How to Create a Form with Icons Using HTML, CSS, and JavaScript

Author:

Introduction

Adding icons to form fields makes your form more visually appealing and user-friendly. In this tutorial, you'll learn how to create a simple form with input fields that contain icons. We will use HTML and CSS for styling, along with JavaScript to capture the form data and print it to the console.

Development Steps

  1. Create Basic HTML Structure: Build the form with fields for name, email, password, and confirmation, and add icons inside the input fields.
  2. Style the Form with CSS: Use CSS to align the icons and inputs together, making them visually appealing and responsive.
  3. Handle Form Submission with JavaScript: Capture form data using JavaScript and print it to the console.

Step 1: Create a Basic HTML Structure

We’ll create the basic structure of the form with input fields for name, email, password, and password confirmation and add icons inside the input fields using the <i> tag from Font Awesome.

Include Font Awesome

First, include the Font Awesome library for icons:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form with Icons</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>

    <!-- Step 1: Form with icons -->
    <div class="form-container">
        <form class="icon-form" id="iconForm">
            <h2>Sign Up</h2>
            <div class="input-group">
                <i class="fas fa-user"></i>
                <input type="text" id="name" placeholder="Enter your name" required>
            </div>
            <div class="input-group">
                <i class="fas fa-envelope"></i>
                <input type="email" id="email" placeholder="Enter your email" required>
            </div>
            <div class="input-group">
                <i class="fas fa-lock"></i>
                <input type="password" id="password" placeholder="Enter your password" required>
            </div>
            <div class="input-group">
                <i class="fas fa-lock"></i>
                <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:

  • Font Awesome icons are used inside the input fields using the <i> tag with classes like fas fa-user, fas fa-envelope, and fas fa-lock.
  • The form contains fields for name, email, password, and password confirmation, with corresponding icons.

Step 2: Style the Form with CSS

Now, we’ll style the form to align the icons inside the input fields, and ensure that the form is 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;
        }

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

        .icon-form h2 {
            margin-bottom: 20px;
            text-align: center;
        }

        .input-group {
            position: relative;
            margin-bottom: 20px;
        }

        .input-group i {
            position: absolute;
            top: 50%;
            left: 10px;
            transform: translateY(-50%);
            color: #999;
        }

        .input-group input {
            width: 90%;
            padding: 10px 10px 10px 35px; /* Extra left padding to make space for the icon */
            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) {
            .form-container {
                padding: 20px;
            }

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

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

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

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

Explanation:

  • Icons: The icons are positioned absolutely inside the input fields using the position: absolute CSS property. We give the input fields extra left padding (padding: 10px 10px 10px 35px;) to make space for the icons.
  • Responsive Design: The form is responsive and adjusts its padding and font size based on screen width using media queries.

Step 3: Handle Form Submission with JavaScript

Next, we’ll add a JavaScript function to handle the form submission, capture the input values, and print them to the console.

<body>
    <script>
        // Step 3: Handle form submission
        document.getElementById('iconForm').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 default form submission behavior, stopping the page from refreshing.
  • console.log(): Prints the form data (name, email, password, confirm password) to the console.

Complete Example

Here’s the complete code for creating a form with icons using 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>Form with Icons</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <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;
        }

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

        .icon-form h2 {
            margin-bottom: 20px;
            text-align: center;
        }

        .input-group {
            position: relative;
            margin-bottom: 20px;
        }

        .input-group i {
            position: absolute;
            top: 50%;
            left: 10px;
            transform: translateY(-50%);
            color: #999;
        }

        .input-group input {
            width: 90%;
            padding: 10px 10px 10px 35px; /* Extra left padding to make space for the icon */
            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) {
            .form-container {
                padding: 20px;
            }

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

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

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

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

    <!-- Step 1: Form with icons -->
    <div class="form-container">
        <form class="icon-form" id="iconForm">
            <h2>Sign Up</h2>
            <div class="input-group">
                <i class="fas fa-user"></i>
                <input type="text" id="name" placeholder="Enter your name" required>
            </div>
            <div class="input-group">
                <i class="fas fa-envelope"></i>
                <input type="email" id="email" placeholder="Enter your email" required>
            </div>
            <div class="input-group">
                <i class="fas fa-lock"></i>
                <input type="password" id="password" placeholder="Enter your password" required>
            </div>
            <div class="input-group">
                <i class="fas fa-lock"></i>
                <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('iconForm').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 guide, you learned how to create a form with icons using HTML, CSS, and JavaScript. By using Font Awesome icons, we made the form more user-friendly and visually appealing. The form captures the user’s data, which can be further processed or sent to a server for registration or login functionality.

Comments

Post a Comment

Leave Comment