How to create Password input field in HTML?
Answer: Using the
input tag with the
type attribute value as password.
HTML forms for login usually contain a password field on the webpage. Passwords are very sensitive information and they should be entered in such a way so that while a user is entering their password in the input field, people around them cannot see it.
Using a text field for a password is not a good idea.
HTML provides a way to hide the password text in the input field as the user is typing it. Use the
type="password" to define the input field for password within the
The actual typed password is replaced with some symbols like an asterisk ("*") or dot ("•") so it cannot be read.
Example: Using type="password" for the input field
Here we have created a login page where we have two input fields and a submit button. The first input field has
type="text" to enter username and the second input field is of
type="password" for the passwords.
Attributes used for passwords
There are some attributes that are used with password input fields, they are:
maxlength - It is used to set the maximum length of the password.
minlength - It is used to set the minimum length of the password.
pattern - The password must contain the specified pattern which can be validated.
placeholder - A value to be displayed in the input field when it is empty.
Example: Setting the length requirement for Password field
Here in the example, we will use
minlength attributes to set the required length for the password.
<h2> Login to the system </h2>
<input type="text" id="username" name="username">
<input type="password" id="pass" name="password" minlength="8" maxlength="16" placeholder="8 to 16 charaters">
<input type="submit" value="Sign in">
Here is the output of the above program. When we set the
maxlength attribute, now the user will be forced to enter a password text with more than 8 characters and less than 16 characters.
It is important to add the
type="password" attribute field to the input field as its the right way to do it. We can use attributes to set the length of the password. To enforce a strong password we can use the
pattern attribute in the password field.