Create a Password Hide and Show Feature Using HTML, CSS, and JavaScript

One of the most common user interface functionalities on websites and apps is the ability to show or hide a password field when a user is typing. This feature adds convenience, allowing users to confirm they’ve entered their password correctly, while also providing a sense of security. In this tutorial, we’ll demonstrate how to implement a password hide and show functionality using HTML, CSS, and JavaScript. By the end, you’ll know how to create a fully responsive and visually appealing password field toggle for any web form.

HTML: Structuring the Form

To get started, we’ll first create a basic HTML form that includes an input field for the password. We also need to add icons or buttons to toggle between showing and hiding the password.

Here’s the basic structure:

				
					<div class="container">
    <div class="row justify-content-center">
        <div class="col-lg-4">
            <div style="background-color: navajowhite; padding: 15px; padding-top: 55px;">
                <h1 class="mb-3 text-center">Password Hide and Show</h1>
                <div class="input-container">
                    <input type="password" id="password" class="form-control" placeholder="Enter password">
                    <i class="fa fa-eye" onclick="togglePassword()" id="showEye"></i>
                    <i class="fa fa-eye-slash" onclick="togglePassword()" id="hideEye"></i>
                </div>
            </div>
        </div>
    </div>
</div>

In this code snippet, we have a password input field where the user will type their password. The icons (fa-eye and fa-eye-slash) are used to toggle between showing and hiding the password. The fa-eye will appear when the password is hidden, and fa-eye-slash will appear when the password is visible.

CSS: Adding Styles to the Form

Now that we have the basic structure, let’s add some CSS to style the password input field and icons. The CSS will also ensure that the elements are visually appealing and responsive.

				
					.fa-eye, .fa-eye-slash {
    position: absolute;
    top: 50%;
    right: 0px;
    transform: translateY(-50%);
    cursor: pointer;
    padding: 10px;
    color: white;
}

.fa-eye {
    background-color: red;
    display: none;
}

.fa-eye-slash {
    background-color: orange;
    display: inline-block;
}

h1 {
    font-size: 25px;
    font-family: fantasy;
}

.container {
    margin-top: 15%;
}

.input-container {
    position: relative;
    width: 100%;
}

input[type="password"], input[type="text"] {
    width: 100%;
    padding-right: 45px;
}

In the CSS, we’ve defined styling for the page’s body, icons, headings, and the password input field. The .fa-eye and .fa-eye-slash classes control the visibility of the eye icons. Initially, .fa-eye-slash is displayed and .fa-eye is hidden. When toggling the password visibility, we’ll switch the display properties of these two classes.

JavaScript: Implementing the Toggle Functionality

Finally, we need the JavaScript function that will handle the actual toggling of the password visibility. This script will dynamically change the input type between password and text, and it will switch between the two icons based on the current state.

				
					var password = document.getElementById("password");
var showEye = document.getElementById("showEye");
var hideEye = document.getElementById("hideEye");

function togglePassword() {
    if (password.type === "password") {
        password.type = "text";
        showEye.style.display = "inline-block";
        hideEye.style.display = "none";
    } else {
        password.type = "password";
        showEye.style.display = "none";
        hideEye.style.display = "inline-block";
    }
}

Here’s how the JavaScript works:

The function togglePassword() checks the current type of the input field (password or text).
If it’s set to password, it switches the type to text to make the password visible, and shows the “eye” icon while hiding the “eye-slash” icon.
If the field is in text mode, it reverses the process to hide the password again.

This simple password hide and show functionality can significantly improve the user experience on your website. It not only ensures that users can easily verify their passwords but also gives them control over their data privacy. You can further enhance this by adding form validation, animations, or incorporating the toggle into multi-step forms.