deCODE - Our Newsletter for Jan 2022 is available for Download. 🗞   🥳
  Signup/Sign In

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 type="password" attribute

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 <input> tag.

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 maxlength and minlength attributes to set the required length for the password.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
</head>
<body>
    <h2> Login to the system </h2>
	<form>
		<div>
			<label for="username">Username:</label>
			<input type="text" id="username" name="username">
		</div>
		<div>
			<label for="pass">Password</label>
			<input type="password" id="pass" name="password" minlength="8" maxlength="16" placeholder="8 to 16 charaters">
		</div>
		<input type="submit" value="Sign in">
	</form>
</body>
</html>

Output:

Here is the output of the above program. When we set the minlength and maxlength attribute, now the user will be forced to enter a password text with more than 8 characters and less than 16 characters.

input field with max and min length

Conclusion

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.