Create a Form with Show/Hide Password in Tailwind CSS
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 >w3wiki 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"> w3wiki </ 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.w3wiki.net/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 > |
Output:
Contact Us