Masking Password in HTML: How to Mask the Password Text Field in an HTML Form to Keep Input Hidden
When creating a user login page for your website you have to consider various things. Apart from the more important things like encryption, authentication methods, user database etc., there are certain small things that are extremely important like, masking the password text field.
Masking password in HTML is as easy as defining a new text field. In fact, password fields are almost similar to normal text fields, with the exception that they mask the text that is typed into it by replacing it with dots. So how do we define a password text field in HTML? Well, it’s as easy as defining a normal text field. Here’s an example.
As you see, masking passwords in HTML is as easy as defining the input type for the input box as “password”. Here, the code tells that the text field is used to input password and the text field size is 30 (Not the length of the password). Other important settings for password fields are:
Maxlength : The maximum length of the password field, i.e., the number of characters that can be entered in the field.
Name : Name the password field so the program can identify it.
Value : Default value.
Align: Sets the alignment of the field.
Below is a short code that you can save in an HTML file and test how password text field works.
Mask Password Field
Enter Your Password :
While working with any HTML IDE and authoring tools like Visual Studio, Expression Web etc., it is even easier to define a password text field just by selecting it from the toolbox or by editing property of a normal text field. For example in Expression Web, you can directly select a password text field from the toolbox and use it on the webpage. Or alternatively, you can also use a normal text field and bring up the “text field properties” dialog and set “Password Field” property to Yes and your text field will now behave as a password text field.