Show / Hide Password HTML CSS JavaScript with Source Code

Submitted by keerio on Wednesday, June 5, 2024 - 11:55.

Language

In this comprehensive guide, I will provide you with source codes that demonstrate how to create a show password input field. The source code is composed of HTML, CSS, and JavaScript, making it easy to integrate into your web projects.

What is the Purpose of a Show/Hide Password Feature?

The Show/Hide Password feature is a common functionality in application forms, such as Login and Registration Forms. Password fields are typically masked, meaning the characters entered are replaced with dots or asterisks for security reasons. This feature allows users to toggle the visibility of their entered password, displaying it as plain text, similar to regular input fields. This can be particularly helpful in ensuring that users have typed their passwords correctly, reducing the likelihood of login errors due to mistyped characters.

HTML

The following script is an HTML code that contains the elements of a simple login form. The source code filename is known as index.html.

<!DOCTYPE html>
<html lang="en">
<head>
    <title> Login Form with Password Show Hide </title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"
        integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="style.css">
</head>
<body>
 
    <div class="form-container">
        <form>
            <h3> Login </h3>
            <label for="username">Username</label>
            <input type="text" name="username" id="username" placeholder="Enter email or phone">
 
            <label for="password">Password</label>
            <div class="pass">
                <input type="password" class="pass" name="password" placeholder="Enter assword" id="password">
                <i id="show-hide" class="fa-solid fa-eye-slash"></i>
            </div>
            <button type="submit">Log In</button>
            <hr>
            <div class="social-container">
                <h3> Login using </h3>
                <div class="social">
                    <div><a  class="go" href="#"><i class="fab fa-google"></i> Google </a></div>
                    <div><a class="fb" href="#"><i class="fab fa-facebook"></i> Facebook</a></div>
                </div>
            </div>
        </form>
    </div>
 
</body>
    <script src="script.js"></script>
</html>

CSS

Here's the CSS (Cascading Stylesheet) file script for the login form. This file script contains the code for the design of the elements in the form. The script is known as style.css and is loaded in the index file.

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
    }
    
    body {
    background-color: #a499f6;
    }
    
    .form-container {
    width: 100%;
    display: flex;
    padding: 50px 20px;
    justify-items: center;
    }
    
    form {
    display: block;
    margin: auto;
    width: 400px;
    background-color: rgba(255, 255, 255, 0.13);
    border-radius: 10px;
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 40px rgba(8, 7, 16, 0.6);
    padding: 50px 35px;
    }
    
    form h3 {
    font-size: 25px;
    text-align: center;
    color: #fff;
    text-shadow: 2px 2px 10px black;
    }
    
    label {
    display: block;
    margin-top: 2rem;
    font-size: 1rem;
    }
    
    input {
    outline: none;
    border: none;
    width: 100%;
    background-color: #f4f3f367;
    border-radius: 4px;
    padding: 15px 10px;
    margin-top: 8px;
    font-weight: 100;
    }
    
    input::placeholder {
    color: rgb(87, 79, 79);
    }
    
    .pass {
    position: relative;
    }
    
    .pass i {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    right: 20px;
    }
    
    #show-hide {
    font-size: 1rem;
    }
    
    button {
    margin-top: 30px;
    width: 100%;
    background-color: #ffffff;
    padding: 15px 0;
    font-size: 18px;
    border-radius: 5px;
    cursor: pointer;
    border: none;
    transition: all 0.1s;
    }
    
    button:hover {
    transform: translate(-0.25rem, -0.25rem);
    box-shadow: 0.25rem 0.25rem #2a2a2c;
    }
    
    hr {
    margin-top: 20px;
    height: 1px;
    background-color: #ffffff7f;
    border: none;
    outline: navajowhite;
    }
    
    .social-container h3 {
    margin-top: 20px;
    margin-bottom: 20px;
    }
    
    .social {
    display: flex;
    justify-content: center;
    width: 100%;
    }
    
    .social div {
    width: 150px;
    border-radius: 5px;
    padding: 10px 5px;
    background-color: rgba(255, 255, 255, 0.27);
    text-align: center;
    margin: 0 14px;
    cursor: pointer;
    }
    
    .social div:hover {
    background-color: rgba(248, 247, 247, 0.511);
    }
    
    .social a {
    text-decoration: none;
    }
    
    .go {
    color: #e60000;
    }
    
    .fb {
    color: blue;
    }
    
    .social i {
    margin-right: 4px;
    }
    
    @media screen and (max-width: 462px) {
    form {
        width: 100%;
    }
    }

JavaScript

Lastly, here's the JS file script containing the code that makes the password field masked and unmasked. The file is known as script.js and is also loaded in the index file.

const showHide = document.getElementById('show-hide');
let passwordInput = document.getElementById('password');
 
showHide.addEventListener('click', function () {
    showHide.classList.toggle('show');
 
    if (showHide.classList.contains('show')) {
        showHide.classList.remove('fa-eye-slash');
        showHide.classList.add('fa-eye');
        passwordInput.setAttribute('type', 'text');
    }
    else {
        showHide.classList.add('fa-eye-slash');
        showHide.classList.remove('fa-eye');
        passwordInput.setAttribute('type', 'password');
    }
});

In the provided JavaScript code snippet:

showHide gets the element with the id 'show-hide'.
passwordInput gets the element with the id 'password'.
The purpose of the click event listener for showHide is to trigger the password field to unmask or mask the entered characters.

Snapshots

Here are some images of the output of the provided source code.

Masked/Hidden Password

Unmasked/Hidden Password

There you have it! I hope this Show/Hide Password Source Code using HTML, CSS, and JavaScript.

Explore more on this website for more Tutorials, Free Source Codes, and Articles covering various programming languages.

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Add new comment

582 views