|
In this article, we will explore how to create a show/hide password option using HTML, CSS, and Javascript. The ability to toggle password visibility is a crucial feature for any registration or login form, and it can be implemented using a hide/show toggle button.
The show and hide password option is an essential feature for any registration or login form. It allows users to toggle password visibility, ensuring they can verify their password before submitting the form. In this article, we will explore how to create a show and hide password option using HTML, CSS, and JavaScript.
JavaScript is a popular programming language used for creating interactive web pages. It is commonly used to manipulate HTML elements and add interactivity to web applications. One of the functionalities JavaScript can provide is toggling password visibility.
To implement this feature, we can use two buttons - one for showing the password and the other for hiding it. The event listeners added to each button will change the type of the input field holding the password.
In simple terms, when the user clicks on the "show password" icon, the input field's type changes from "password" to "text," revealing the password in plain text. Similarly, when the user clicks on the "hide password" icon, the input field's type changes back to "password," hiding the password.
Password Show or Hide Toggle using HTML CSS & JavaScript [Source Code]
The project we will be creating consists of three files: index.html, style.css, and script.js. The index.html file contains the static files that users can read, while the style.css file contains the CSS stylesheet to enhance the appearance of the static files. Finally, the script.js file contains the Javascript code that brings the project.
After creating an HTML file with the name of index.html and copy and paste the given codes in your HTML file. Remember, you’ve to create a file with the .html extension. You’ve to download files from the given download button to use.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css">
<link rel="stylesheet" href="style.css">
<title>Input password show hidden</title>
</head>
<body>
<div class="input">
<div class="input__overlay" id="input-overlay"></div>
<i class='bx bx-lock-alt input__lock'></i>
<input type="password" placeholder="Password..." class="input__password" id="input-pass">
<i class='bx bx-hide input__icon' id="input-icon"></i>
</div>
<script src="script.js"></script>
</body>
</html>
After that Create a Css file with the name of style.css and copy and paste in your css file. Remember, you’ve to create a file with the .css extension.
* {
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
margin: 0;
height: 100vh;
display: grid;
place-items: center;
background-color: hsl(232, 45%, 90%);
}
.input {
position: relative;
background-color: hsl(232, 54%, 11%);
padding: 1.35rem 1.25rem;
border-radius: .5rem;
display: flex;
align-items: center;
column-gap: .75rem;
}
.input__lock, .input__icon {
font-size: 1.25rem;
z-index: 1;
}
.input__lock, .input__password {
color: hsl(232, 100%, 99%);
}
.input__icon {
color: hsl(232, 54%, 43%);
cursor: pointer;
}
.input__password {
background: transparent;
border: none;
outline: none;
font-size: 14px;
z-index: 1;
}
.input__password::placeholder {
color: hsl(232, 100%, 99%);
}
.input__overlay {
width: 32px;
height: 32px;
background-color: hsl(232, 100%, 99%);
position: absolute;
right: .9rem;
border-radius: 50%;
z-index: 0;
transition: .4s ease-in-out;
}
.overlay-content {
width: 100%;
height: 100%;
border-radius: .5rem;
right: 0;
}
.overlay-content ~ .input__lock {
color: hsl(232, 54%, 11%);
}
.overlay-content ~ .input__password,
.overlay-content ~ .input__password::placeholder {
color: hsl(232, 8%, 35%);
}
Lastly at the last Create Js file with the name of app.js and copy and paste in your Js file. Remember, you've to create a file with the.js extension.
const showHiddenInput = (inputOverlay, inputPass, inputIcon) => {
const overlay = document.getElementById(inputOverlay),
input = document.getElementById(inputPass),
iconEye = document.getElementById(inputIcon)
iconEye.addEventListener('click', () => {
if (input.type === 'password') {
input.type = 'text'
iconEye.classList.add('bx-show')
} else {
input.type = 'password'
iconEye.classList.remove('bx-show')
}
overlay.classList.toggle('overlay-content')
})
}
showHiddenInput('input-overlay', 'input-pass', 'input-icon')
Finally, Creating a password show and hidden using HTML, CSS, and JavaScript is a fun and rewarding project that can be used in a variety of different contexts. You can easily obtain the source code files by clicking on the download button provided, completely free of charge. The downloaded zip file includes the project folder with all the necessary source code files.