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:
Password Hide and Show
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
ortext
). - If it’s set to
password
, it switches the type totext
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.