How to toggle password visibility in forms using Bootstrap-icons ?
Passwords are those input types that appear as ******. It can be shown to the user by adding a feature of the eye icon so that the user can see the password.
In this article, we will learn how to toggle password visibility using Bootstrap.
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML course.
Approach:
- We will use few classes of Bootstrap-icons – bi, bi-eye-slash, and bi-eye.
- Toggle these classes using JavaScript.
- We will toggle the type of input field of password ( text to password and password to text ).
Files to be imported:
For the icons in the input field ( Eye Icon)
<link rel=”stylesheet” href=”https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css” />
To style form elements, like button, adding padding, etc
<link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css” integrity=”sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T” crossorigin=”anonymous”>
Explanation of Javascript Function:
- We are fetching the id of the password using the getAttribute() method and determining its type. This fetching is done when an event (click) is created.
- If it is text then convert it into the password.
- If it is a password then convert it to text.
- Conversion is done using setAttribute() method.
HTML
<!DOCTYPE html><html lang="en"> <head> <title>Toggle Password Visibility</title> <link rel="stylesheet" href= <link rel="stylesheet" href= integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <style> form i { margin-left: -30px; cursor: pointer; } </style></head> <body> <div class="container"> <h1>Sign In</h1> <form> <p> <label>Username:</label> <input type="text" name="userID" id="userID"> </p> <p> <label>Password:</label> <input type="password" name="password" id="password" /> <i class="bi bi-eye-slash" id="togglePassword"></i> </p> <button type="submit" id="submit" class="btn btn-primary"> Log In </button> </form> </div> <script> const togglePassword = document .querySelector('#togglePassword'); const password = document.querySelector('#password'); togglePassword.addEventListener('click', () => { // Toggle the type attribute using // getAttribure() method const type = password .getAttribute('type') === 'password' ? 'text' : 'password'; password.setAttribute('type', type); // Toggle the eye and bi-eye icon this.classList.toggle('bi-eye'); }); </script></body> </html> |
Output:
