Create a Form with Show/Hide Password in Tailwind CSS

Last Updated : 28 Feb, 2024

Show/Hide Password visibility is the feature in web applications through which users can view the entered password with dynamic behavior by toggling through the show/hide icon. This increases the user experience in a visually appealing way. The user can easily maintain security while filling out forms in real-time. With the use of Tailwind CSS, we can easily implement this functionality by having a dynamic password visibility toggle.

Approach

Create a basic HTML structure with two input fields for Username and Password, and create a button to submit the form.
Include Tailwind CSS in the project. We can include it by using its CDN link.
Use Tailwind CSS classes to style the input fields along with the button for a clean and responsive design.
In the main JavaScript code, use addEventListener() to the password toggle button, which dynamically changes the password input field between text and password visibility.
When the form is submitted the submitted message is been logged into the console.

Example: Implementation to Create a form with show/hide password in Tailwind CSS.

Javascript

document.addEventListener('DOMContentLoaded', function () {
    const passIn = document.getElementById('password');
    const btn = document.getElementById('togglePassword');
    btn.addEventListener('click', function () {
        const type =
            passIn.getAttribute('type') ===
                'password' ? 'text' : 'password';
        passIn.setAttribute('type', type);
    });
    const loginForm = document.getElementById('loginForm');
    loginForm.addEventListener('submit', function (event) {
        event.preventDefault();
        loginForm.reset(); // Reset the form
        alert('Form submitted');
    });
});

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>GeeksforGeeks Form</title>
    <script src=
"https://cdn.tailwindcss.com">
      </script>
</head>
 
<body class="bg-gray-100 font-sans">
    <div class="min-h-screen flex items-center 
                justify-center">
        <div class="bg-white p-8 rounded shadow-md w-96">
            <h2 class="text-2xl font-bold mb-6 
                       text-center text-green-600">
                GeeksforGeeks
            </h2>
            <h4 class="font-bold mb-4 text-center 
                       text-black-600">
                Enter your login credentials
            </h4>
            <form id="loginForm">
                <div class="mb-4">
                    <label for="username"
                           class="block text-sm font-bold 
                                  font-medium text-black-600">
                          Username:
                    </label>
                    <input type="text" id="username"
                           placeholder="Enter your username"
                           required name="username"
                           class="mt-1 p-2 w-full border rounded-md">
                </div>
                <div class="mb-4 relative">
                    <label for="password"
                           class="block text-sm font-bold 
                                  font-medium text-black-800">
                          Password:
                      </label>
                    <div class="flex items-center">
                        <input type="password" id="password"
                               placeholder="Enter your Password"
                               required name="password"
                               class="mt-1 p-2 w-full border rounded-md pr-10">
                        <button type="button" id="togglePassword"
                                class="focus:outline-none -ml-8">
                            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240227164304/visible.png"
                                 alt="" class="w-4">
                        </button>
                    </div>
                </div>
                <button type="submit"
                        class="w-full bg-green-500 text-white 
                               p-2 rounded-md hover:bg-green-600">
                    Submit
                </button>
                <p class="text-center mt-2">
                      Not registered? 
                      <span class="text-purple-500">
                          Create an account
                      </span>
                  </p>
            </form>
        </div>
    </div>
    <script src="app.js"></script>
</body>
 
</html>