• Home
  • Subscribe
  • Contribute Us
    • Share Your Interview Experience
  • Contact Us
  • About
    • About CSEstack
    • Campus Ambassador
  • Forum & Discus
  • Tools for Geek
  • LeaderBoard
CSEstack

What do you want to Learn Today?

  • Programming
    • Tutorial- C/C++
    • Tutorial- Django
    • Tutorial- Git
    • Tutorial- HTML & CSS
    • Tutorial- Java
    • Tutorial- MySQL
    • Tutorial- Python
    • Competitive Coding Challenges
  • CSE Subject
    • (CD) Compiler Design
    • (CN) Computer Network
    • (COA) Computer Organization & Architecture
    • (DBMS) Database Management System
    • (DS) Data Structure
    • (OS) Operating System
    • (ToA) Theory of Automata
    • (WT) Web Technology
  • Interview Questions
    • Interview Questions- Company Wise
    • Interview Questions- Coding Round
    • Interview Questions- Python
    • Interview Questions- REST API
    • Interview Questions- Web Scraping
    • Interview Questions- HR Round
    • Aptitude Preparation Guide
  • GATE 2022
  • Linux
  • Trend
    • Full Stack Development
    • Artificial Intelligence (AI)
    • BigData
    • Cloud Computing
    • Machine Learning (ML)
  • Write for Us
    • Submit Article
    • Submit Source Code or Program
    • Share Your Interview Experience
  • Tools
    • IDE
    • CV Builder
    • Other Tools …
  • Jobs

Hide/Show Password using Eye icon in HTML and JavaScript

Aniruddha Chaudhari/37509/16
CodeHTML & CSS

In this tutorial, I will learn how to hide and show password using eye icon in HTML and JavaScript. I implemented it for one of my projects as below.

This very useful feature you should have on your login form.

There are simple two steps to follow. First, create the HTML login form. Secondly, show/hide password when the user clicks on the eye icon.

Watch live demo

Don’t miss any of such tips…

Subscribe Our YouTube Channel

Let’s see it step-by-step. I will walk you through the complete code.

1. Create HTML Login form with Eye Icon

We are going to place the eye icon inside the password text field. We can use the eye icon from the awesome font script library.

First of all import the awesome font Stylesheet into your HTML form page.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">

Use the tag <i> to display the eye icon. This icon is also known as the visibility eye icon.

<i class="far fa-eye" id="togglePassword"></i>

Use the below CSS to put the eye icon at the end of the password text field.

margin-left: -30px; 
cursor: pointer;

If you are new to CSS, refer to how to add CSS in HTML.

Put this tag below the passwords input field. This is how the sample form will look like with the password field.

<form method="post">
  Username
  <input type="text" name="username" autofocus="" autocapitalize="none" autocomplete="username" required="" id="id_username">
  Password
  <input type="password" name="password" autocomplete="current-password" required="" id="id_password">
  <i class="far fa-eye" id="togglePassword" style="margin-left: -30px; cursor: pointer;"></i>
  <button type="submit" class="btn btn-primary">Login</button>
</form>

2. Add JavaScript to Toggle Show/Hide Password

Copy and paste the below code into your JavaScript. This code is self-explanatory if you are familiar with the JavaScript basics.

const togglePassword = document.querySelector('#togglePassword');
  const password = document.querySelector('#id_password');

  togglePassword.addEventListener('click', function (e) {
    // toggle the type attribute
    const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
    password.setAttribute('type', type);
    // toggle the eye slash icon
    this.classList.toggle('fa-eye-slash');
});

You can also insert this code in your HTML page with <script> tag.

Show/Hide Password in Django

In the sample picture shown above, I have implemented it for one of my websites developed using the Django Python framework. If you are developing it for Django, refer registration and login form in Django.

That’s all. Now you can hide and show password using eye icon in HTML with simple JavaScript and CSS code.

If you find any difficulties or need any customization, let me know in the comment section below.

Python Interview Questions eBook

HTMLJavaScript
Aniruddha Chaudhari
I am complete Python Nut, love Linux and vim as an editor. I hold a Master of Computer Science from NIT Trichy. I dabble in C/C++, Java too. I keep sharing my coding knowledge and my own experience on CSEstack.org portal.

Your name can also be listed here. Got a tip? Submit it here to become an CSEstack author.

Comments

  • Reply
    Dakisemut
    January 10, 2022 at 1:54 pm

    Does this work on WordPress?

    • Reply
      Aniruddha Chaudhari
      January 26, 2022 at 11:20 pm

      Yes. As it is pure JavaScript and HTML/CSS code, it will work on WordPress as well.

      • Reply
        dilip
        April 19, 2022 at 12:55 am

        It is not working in Firefox. Is it any extra CSS we need to add for the input box or eye icon?

  • Reply
    Lamonier
    February 25, 2022 at 1:08 pm

    Thank you so much!
    Keep up with the good tutorials 🙂

    • Reply
      Aniruddha Chaudhari
      February 27, 2022 at 10:22 am

      You’re welcome, Lamonier!

      This keeps me motivated to share more. Happy weekend!

  • Reply
    Ummehany Shanda
    March 26, 2022 at 8:53 pm

    I am trying on bootstrap the eye icon is showing in the bottom of the input field.
    How can I do that?

    • Reply
      Aniruddha Chaudhari
      March 29, 2022 at 7:10 pm

      You have to change your CSS accordingly.

    • Reply
      elsha
      December 9, 2022 at 5:30 pm

      Do you correct it? I have the same problem.

  • Reply
    zJosh
    May 31, 2022 at 1:12 pm

    Hi, Thanks for this! however I’m trying to get it to work on a form with two password fields, how can I do that? for example “type in new password” and “confirm new password”

    • Reply
      Aniruddha Chaudhari
      July 9, 2022 at 3:12 pm

      Here you go.
      – Create two different input HTML tags for two password fields.
      – You have to verify if both the passwords are the same. You can do this using JavaScript when the user clicks the submit button

  • Reply
    ilyas
    May 31, 2022 at 1:14 pm

    Hi! thanks for this. Is there a way to modify the js so that I can get two toggle-able password fields to work in the same form?

    • Reply
      Aniruddha Chaudhari
      July 9, 2022 at 3:05 pm

      In that case, write two different input tags for passwords with two different IDs (says id_password_1 and id_password_2). And then write two separate JS functions.

  • Reply
    Sayani
    June 9, 2022 at 5:49 am

    This is working for edge but not for chrome, its coming as a square box

    • Reply
      Aniruddha Chaudhari
      June 23, 2022 at 11:52 pm

      This should not be the problem as I personally tested it on Google Chrome.

  • Reply
    ARPITA DANGI
    August 31, 2022 at 10:15 pm

    It is not working even if I copied it too. What’s the issue with it? Everything is correct only the eye icon is not visible.

    • Reply
      Aniruddha Chaudhari
      August 31, 2022 at 11:17 pm

      Check the source code of your webpage. If you are seeing the eye icon code, most probably the eye icon component is not well aligned. In that case, use proper padding and margin.

Leave a Reply Cancel reply

HTML CSS & JavaScript

  • HTML- First Program
  • HTML- Basic Tags
  • HTML- Adding CSS
  • HTML- Best Form Design Practices
  • HTML- Text Indent using CSS
  • HTML- Drop Cap using CSS
  • HTML- Add Favicon
  • HTML- Adding ToC on Website
  • HTML- Save Page as PDF
  • CSS- 17 Tips for Optimizing CSS
  • CSS- Adding Image Shadow
  • Show/Hide Password on Login Form
  • Pass Data to Another Web Page [JS]
  • Horizontal Scrolling on Mobile Web

HTML Editing Tools

  • HTML- Online Editor
  • HTML- Novi Builder

© 2022 – CSEstack.org. All Rights Reserved.

  • Home
  • Subscribe
  • Contribute Us
    • Share Your Interview Experience
  • Contact Us
  • About
    • About CSEstack
    • Campus Ambassador
  • Forum & Discus
  • Tools for Geek
  • LeaderBoard