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 the password is important as a basic first step to security, so that the user’s password is not compromised by way of shoulder surfing. When you design a website with any good CMS (Content Management Systems) or frameworks,this is automatically taken care of by the CMS. But if you are designing your webpage in plain HTML or in any other language where you design the login form in HTML from scratch, you need to make sure that you mask the password text field yourself. Many developers prefer to mask the password text field using JavaScript but it can be done in HTML with ease.

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.

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.