DEV Community

Codes With Pankaj
Codes With Pankaj

Posted on

How to Create a "Show Password" Toggle

Welcome to codeswithpankaj.com! In this tutorial, we will create a simple "Show Password" toggle functionality using HTML, CSS, and JavaScript. This feature allows users to toggle the visibility of their password while typing, enhancing user experience in web forms.

Step 1: Create the HTML Structure

First, create the basic HTML structure for your form. This includes an input field for the password and a checkbox to toggle the visibility.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Show Password Toggle</title>
</head>
<body>
    <form>
        <label for="password">Password:</label>
        <input type="password" id="password" name="password">
        <label for="togglePassword">Show Password</label>
        <input type="checkbox" id="togglePassword">
    </form>

    <script src="script.js"></script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Step 2: Add the JavaScript

Next, add the JavaScript code to handle the toggle functionality. This script listens for changes to the checkbox and toggles the type of the password input field accordingly.

document.getElementById("togglePassword").addEventListener("change", function() {
    var passwordInput = document.getElementById("password");
    if (this.checked) {
        passwordInput.type = "text";
    } else {
        passwordInput.type = "password";
    }
});
Enter fullscreen mode Exit fullscreen mode

Save this JavaScript code in a file named script.js.

Step 3: Style the Form (Optional)

You can add some basic CSS to style the form and make it look better. This step is optional but recommended for a better user experience.

<style>
    form {
        max-width: 300px;
        margin: 0 auto;
        padding: 20px;
        border: 1px solid #ccc;
        border-radius: 5px;
    }

    label {
        display: block;
        margin-bottom: 10px;
    }

    input[type="password"], input[type="text"] {
        width: 100%;
        padding: 8px;
        margin-bottom: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
    }
</style>
Enter fullscreen mode Exit fullscreen mode

Final Code

Combine the HTML and CSS into a single file for simplicity, and include the JavaScript as an external file.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Show Password Toggle</title>
    <style>
        form {
            max-width: 300px;
            margin: 0 auto;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        label {
            display: block;
            margin-bottom: 10px;
        }

        input[type="password"], input[type="text"] {
            width: 100%;
            padding: 8px;
            margin-bottom: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <form>
        <label for="password">Password:</label>
        <input type="password" id="password" name="password">
        <label for="togglePassword">Show Password</label>
        <input type="checkbox" id="togglePassword">
    </form>

    <script src="script.js"></script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Save this file as index.html and the JavaScript code as script.js. Open index.html in your web browser to see the "Show Password" toggle in action.


For more tutorials, visit codeswithpankaj.com

Top comments (1)

Collapse
 
rouilj profile image
John P. Rouillard • Edited

You should set spellcheck=false on the password field. While most (but not all) browsers have disabled spellcheck on the password field (since it makes no sense), when you change the input type to text the password could be sent to a server over the network. Also autocorrect, autocapitalize should be disabled. Some references for spellcheck:

schneier.com/blog/archives/2022/09...

bitdefender.com/blog/hotforsecurit...

Edit: removed autocomplete from the list of disabled attributes. It may be needed on some browsers to make autofill of passwords (from saved credentials) work.