How to Create a "Show Password" Toggle
Tags: webdev, javascript, beginners, programming
Published: 2024-07-07 09:38:33



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.

```html
<!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>
```

#### 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.

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

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.

```html
<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>
```

#### Final Code

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

```html
<!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>
```

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](https://www.codeswithpankaj.com/)