How to Hide Password in HTML ?

Last Updated : 23 Jan, 2024

Hiding the password is commonly known as Password Masking. It hides the password characters when entered by the users by the use of bullets (•), an asterisk (*), or some other characters.

It is always a good practice to use password masking to ensure security and avoid misuse. Generally, password masking is helpful to hide the characters from any user when the screen is exposed to being projected so that the password is not publicized In this article, we will learn to hide the password using HTML.

Table of Content

Using the input type = "password"
Using the input type = "text"

Using the input type = "password"

The input type="password" in HTML is used for creating password input fields. It conceals the entered characters for security, displaying dots or asterisks instead.

Syntax:

<input type="password" placeholder="Enter your Password">

Example 1: In this example, we will use input type="password" in an HTML document.

HTML

<!DOCTYPE html>
<html>

<head>
    <style>
        * {
            font-family: Arial;
            margin: 2px;
            padding: 10px;
            text-align: center;
            position: flex;
        }

        h2 {
            color: green;
            padding: 2px;
        }

        body {
            margin-top: 10%;
        }
    </style>
</head>

<body>
    <h2>GeeksforGeeks</h2>
    <b>Hiding password</b>
    <form action="#" method="POST">
        <label> <b>Username:</b> </label>
        <input type="text" 
               placeholder="Enter Username" 
               required />
        <br /><br />
        <label> <b>Password:</b> </label>
        <input type="password" 
               placeholder="Enter Password" 
               required />
        <br /><br />
        &nbsp;&nbsp;
      <button type="submit">
        Submit
      </button>
    </form>
</body>

</html>

Output:

Using the input type = "text"

This method is not very much preferred, in this method we would just be camouflaging the text into some characters of our own choice. This method is deprived of security and is recommended only for password masking with other characters such as squares, circles, etc.

For Squares: -webkit-text-security: square
For Circles: -webkit-text-security: circle

Example 2: In this example, we will use input type="text" in an HTML document.

HTML

<!DOCTYPE html>
<html>

<head>
    <style>
        * {
            font-family: Arial;
            margin: 2px;
            padding: 10px;
            text-align: center;
            position: flex;
        }

        body {
            margin-top: 10%;
        }
    </style>
</head>

<body>
    <form action="#" method="POST">
        <label> <b>Username</b> </label>
        <input type="text" 
               placeholder="Enter Username" 
               required />
        <br /><br />

        <label> <b>Password</b> </label>
        <input type="text" 
               style="-webkit-text-security: circle" 
               placeholder="Enter Password" 
               required />
        <br />

        <label> <b>Password</b> </label>
        <input type="text" 
               style="-webkit-text-security: square" 
               placeholder="Enter Password" 
               required />
        <br /><br />

        <button type="submit">
          Submit
          </button>
    </form>
</body>

</html>