How to add a password field (textbox) in HTML
problem
You wish to let your user type a password on your webpage, e.g. for login or signing up. In this post we will see how to use a password field which is similar to a textfield with the difference of not showing what is being typed; instead it shows dots.
SOLUTION
Using the <input> tag along with the type attribute set to password. For example:
<input type="password"/>
output
The password field hides the characters entered by the user for security.
Adding a placeholder
For example:
<input type="password" placeholder="Enter your password" />
output
typing in action
Adding a limit
It is similar to the text box, so we can add more attributes if we like, for example to limit the characters that the user can type. Let’s limit them to 8 by using the maxlength attribute. For example:
<input type="password" placeholder="Enter your password" maxlength="8" />
output
In this case, the maxlength attribute allows the user to type up to 8 characters. It’s a good practice for data validation.
conclusion
In this post we saw how to create a password field in HTML and topping it up with some attributes like maxlength and placeholder. More attributes can be added of course as long as it supports them like minlength, size, required, etc.
Share it!
Ellion
Professional IT consultant, writer, programmer enthusiast interested in all sorts of coding.
Eats all cookies 🍪