How to Hide Password in HTML ? - GeeksforGeeks

30 Jun, 2021
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">
 
Example:
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 />          <button type="submit">Submit</button>    </form></body>  </html>
Output:
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.For Squares: -webkit-text-security: squareFor Circles:  -webkit-text-security: circle
For Squares: -webkit-text-security: squareFor Circles:  -webkit-text-security: circle
For Squares: -webkit-text-security: square
For Squares: -webkit-text-security: square
For Circles:  -webkit-text-security: circle
For Circles:  -webkit-text-security: circle
Example:
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>
Output:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
CSS-Properties
HTML-Attributes
HTML-Questions
Picked
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a web page using HTML and CSS
How to set space between the flexbox ?
Form validation using jQuery
Search Bar using HTML, CSS and JavaScript
How to style a checkbox using CSS?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property
How to set input type date in dd-mm-yyyy format using HTML ?
How to Insert Form Data into Database using PHP ?
REST API (Introduction)