HTML Password Input Box | Field Show Characters example

HTML Password Input is used in a web app when there any registration and logging process involved. It’s easy to use, you just need to use <input> tag with a type=”password” attribute.

This Tutorial you will learn how to create an HTML input field, show it, get the value and placeholder with examples.

HTML Password Input Box Field  Show Characters example

Syntax

A simple syntax of html password input type.

<input type="password">

HTML Password Field Example

You just need to write type=”password” in <input> tag, same as a Text box, Checkbox and Radio button examples.

<!DOCTYPE html>
<html>
    <body>

    <h2>HTML Input Type Passowrd</h2>

    <label for="name">Enter Password:</label>

    <input type="password" id="pass" name="pass">
    
    </body>
</html>

Output: See the below GIF file, how password filed will show in browser.

HTML Password Field Example Output

Show Password Text |Characters

Some time user put the wrong password many times. That you need to show html password input show text value to know the user what he is entering. A password field show characters will not do the first time or direct every time. There should be some button where the user can click on an icon or text button which indicates to click and see password characters.

To get it done you have to use the javascript function. Where the type of attribute will change to Password to Text using a Radio button.

<!DOCTYPE html>
<html>
    <body>

    <h2>HTML Input Type Passowrd</h2>

    Enter Password: <input type="password"  id="myInput"><br><br>
    <input type="checkbox" onclick="myFunction()">Show Password
        
        <script>
            function myFunction() {
                var x = document.getElementById("myInput");
                if (x.type === "password") {
                    x.type = "text";
                } else {
                    x.type = "password";
                }
            }
        </script>
    </body>
</html>

Output: See in Gif output how to enter pass character will show on click radio button.

Show Password Text Characters password input

Placeholder | Hint for user

A placeholder in the HTML password input box show hint (what content will come here) to the user. It’s as easy as just writing a placeholder attribute with a value in the <input> tag.

<!DOCTYPE html>
<html>
    <body>

    <h2>HTML Input Type Passowrd</h2>

    <label for="name">Enter Password:</label>

    <input type="password" id="pass" name="pass" placeholder="Password">
    
    </body>
</html>

Output: How’s look password hint in input password box.

 HTML input Placeholder

Value | How to Get

Without getting the html password input value, you can do nothing. So how you will get the input password value in HTML?

See the below example for that. Using a button to trigger a javascript function gets the value of a given id password input field.

<!DOCTYPE html>
<html>
    <body>

    <h2>HTML Input Type Passowrd</h2>

    Enter Password: <input type="password"  id="myInput"><br><br>
    <button onclick="myFunction()">Get the value</button>
        
        <p id="passValue"></p>
        
        <script>
            function myFunction() {
                var x = document.getElementById("myInput").value;
                document.getElementById("passValue").innerHTML = x;
            }
        </script>
    </body>
</html>

Output: See the GIF image how it is working.

password input value html example output

Do comment if you have any suggestion and doubt on this tutorial,

Note: TheAll HTML Input Password Box Examples are tested on Safari browser (Version 12.0.2).
OS: macOS 10.14 Mojave
Code: HTML 5 Version


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.