DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for How to hide Passwords in HTML ?
Hariket Sukeshkumar Sheth
Hariket Sukeshkumar Sheth

Posted on

How to hide Passwords in HTML ?

Hiding the password is commonly known as Password Masking. It is hiding 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 its 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.

Approach:

Method 1: Using the input type = β€œpassword"

<input type="password" placeholder="Enter your Password">
Enter fullscreen mode Exit fullscreen mode

Example:

 <!DOCTYPE html>
  <html>

  <head>
      <style>
        @import url(https://fonts.googleapis.com/css?family=Salsa);

          * {
              font-family: Salsa;
              font-weight: bolder;
              margin: 2px;
              padding: 10px;
              text-align: center;
              position: flex;
          }

          h2 {
              margin-left: 350px;
              background: #000;
              color: #fff;
              padding: 10px;
              width: 100px;
              position: inline;
              text-align: center;
              border-radius: 10px;
          }

          body {
              margin-top: 10%;
          }

        input{
          font-weight: normal;
        }

        button{
          background: #0275d8; 
          color: #fff; 
          padding: 15px; 
          border: none; 
          border-radius: 30px; 
          width: 100px;
        }
      </style>
  </head>

  <body>
      <h2>DEV</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 />
            <button type="submit">Submit</button>
      </form>
  </body>

  </html>
Enter fullscreen mode Exit fullscreen mode

Code Output:

1.JPG


Method 2: 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.
    1. For Squares: -webkit-text-security: square
    2. For Circles: -webkit-text-security: circle

Example:

  <!DOCTYPE html>
  <html>

  <head>
      <style>
          * {
              font-family: Arial;
              margin: 2px;
              padding: 10px;
              text-align: center;
              position: flex;
          }
        button{
          background: #000; 
            color: #fff; 
            font-weight: bolder;
            padding: 15px; 
            border: none; 
            border-radius: 30px; 
            width: 100px;
        }
          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>
Enter fullscreen mode Exit fullscreen mode

Code Output:
2.JPG

Top comments (1)

Collapse
violet profile image
Info Comment hidden by post author - thread only accessible via permalink
Elena

The -webkit-text-security is not part of the w3c standard and it's also not supported by firefox.

There will also be issues with password managers not recognizing the field to be a password and the autocomplete will be broken.

Some comments have been hidden by the post's author - find out more

πŸ€” Did you know?

Β 
πŸŽ™ DEV hosts some podcasts that you can find on our Podcasts page.