Description
A developer's journey through code. I build, I break, and I write about it. Explore articles on modern software development, programming tips, and more.
How to implement show/hide password in a form using JavaScript
Published in: 2023-11-24 12:04:23 Author: SunshineIHCTS Section: JavaScript
User experience is an important factor that can make or break the success of a website or application, developers who want to keep their projects active need to improve. One often-overlooked aspect of user experience is the login form, where users input sensitive information like passwords. Implementing a "Show/Hide Password" feature not only enhances user convenience but also adds an extra layer of accessibility and security. In this article, I will show you how to integrate this feature into a form using JavaScript. Once again, welcome to my website! my name is Jonathan Izuchukwu popularly known as SunshineIHCTS, I am a software developer and always willing to guide the younger ones as they progress through their journey in the field of programming. Let us proceed.
The HTML Structure
Let us begin by writing the HTML code that constitutes our login form:
<!DOCTYPE html>
<!-- Designed by SunshineIHCTS | Visit sunshineihcts.com for more -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Show/Hide Password Form</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="form-container">
<img src="logo.png" alt="logo" height="70">
<br>
<form id="myForm">
<div class="form-group">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
</div>
<div class="form-group password-toggle">
<label for="password">Password:</label>
<input type="password" id="password-input" name="password" required>
<span class="toggle-icon" onclick="togglePassword()"><i class="fa fa-eye-slash"></i></span>
</div>
<button type="submit">Submit</button>
</form>
</div>
<script src="script.js"></script>
</body>
</html>
The code above is a simple form in HTML, it also has a stylesheet (style.css) and a script (scripts.js) linked to it, this means that we have our CSS and JavaScript codes in separate files being linked in the HTML file to implement the show/hide password feature in the form.
The CSS Styling
The CSS code is responsible for styling the form, ensuring a clean and visually appealing design as you can see in the video at the end of this article. Key elements include proper spacing, font selection, and button styling. The "password-toggle" class sets the stage for our JavaScript functionality to implement the show/hide password feature in the form.
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: rgb(110, 80, 44);
}
.form-container {
width: 300px;
padding: 20px;
background-color: #f4f4f4;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
img {
display: block;
margin-left: auto;
margin-right: auto;
}
.form-group {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 8px;
}
input {
width: 100%;
padding: 8px;
box-sizing: border-box;
}
button {
background-color: rgb(110, 80, 44);
color: #fff;
}
.password-toggle {
position: relative;
}
#password-input {
padding-right: 40px;
}
.toggle-icon {
position: absolute;
top: 70%;
right: 10px;
transform: translateY(-50%);
cursor: pointer;
}
The JavaScript Magic
This is where it gets interesting so pay a close attention, I will write the JavaScript code that enables the Show/Hide Password functionality and explain it properly for a better understanding:
function togglePassword() {
var passwordInput = document.getElementById("password-input");
var toggleIcon = document.querySelector(".toggle-icon");
if (passwordInput.type === "password") {
passwordInput.type = "text";
toggleIcon.innerHTML = '<i class="fa fa-eye"></i>';
} else {
passwordInput.type = "password";
toggleIcon.innerHTML = '<i class="fa fa-eye-slash"></i>';
}
}
Recall that I pointed out the onclick="togglePassword()" in the HTML code that sets the stage for our JavaScript functionality to implement the show/hide password feature in the form, we have used the onclick function to implement show/hide password using JavaScript in the form each time a user clicks on each toggle element which displays one at a time.
The togglePassword function is at the heart of our Show/Hide Password feature. It dynamically changes the type attribute of the password input field between "password" and "text" based on user interaction. Additionally, it updates the toggle icon accordingly based on user interaction.
Why Implement Show/Hide Password?
Implementing a Show/Hide Password feature in your login forms offers several benefits which includes:
- User Convenience: Users can easily verify the accuracy of their entered password without relying on memory alone.
- Accessibility: Some users may prefer to view their password while typing, especially when dealing with complex combinations. This feature caters to a broader audience.
- Error Prevention: With the ability to view passwords, users are less likely to make mistakes during the login process.
- Security: Users can easily hide their passwords from people behind their screen while typing which provides a better form of security.
You may like:
Copyright © 2018 - 2026 SunshineIHCTS | All rights reserved. Powered by 
Comments section
You need to be logged in to comment, Login or Register.Approved comments:
No comments yet! be the first to comment