Input Type Password In HTML: Here’s How To Obfuscate Password Entry Fields
Disclosure: Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page.
Learn more - Value of
- How To Define Input Type In HTML (All The Values And Attributes)
- What does
Input Type Password In HTML: Here’s How To Obfuscate Password Entry Fields
do? - Displays an obfuscated password entry field.
Code Example
<form action="myform.cgi">
<input type="password" name="password" id="password" maxlength="6">
<label for="password"> Type a fake password here</label>
<br><input type="submit" value="Submit">
</form>
The password
value of the input
attribute displays a field where the user can type a password into a form. It’s important to note that this field obfuscates the characters that are typed in, so that passers by cannot read the characters on-screen. However, this doesn’t apply any encryption when the data is actually sent, so don’t rely on a password
field to actually secure the data. Obfuscated characters are displayed differently in different browsers. In most cases, they will be replaced with circular bullets, or asterisks.
Restricting Data in Password Fields
The password
value of input
is rarely used solo. You’ll normally want to specify additional attributes to constrain the data that is entered. We’ve covered these attributes elsewhere, so the section that follows is a brief summary. It’s likely that your database is set to accept a maximum length for the password. To avoid problems with saving passwords, or logging in, it’s good practice to specify a maxlength
for the field that corresponds with the setting in your database. Likewise, you can specify a minlength
, if your script requires it. Setting a defaultvalue
will pre-fill the password field with the value you specify. Likewise, setting the autocomplete
attribute will result in any pre-saved value to be entered into the field automatically. Using readonly
will prevent the password from being edited. To enforce password rules, use the pattern
attribute.
Claire is seasoned technical writer, editor, and HTML enthusiast. She writes for HTML.com and runs a content agency, Red Robot Media.
Browser Support for password
All values of type
Value name | Notes |
---|
button | Defines a button-like input. |
checkbox | Defines a checkbox, which the user can toggle on or off. |
file | Defines a file upload box with a browse button. |
hidden | Defines a field within a form that is not visible to the user. |
image | Defines an image that is clicked to submit a form. |
password | Displays an obfuscated password entry field. |
radio | Defines a circular selection button in a form. |
reset | Defines a button on a form that will return all fields to their default values. |
submit | Defines a button that is clicked to submit a form. |
text | Defines a text entry field in a form. |
All attributes of input
Attribute name | Values | Notes |
---|
step | | Specifies the interval between valid values in a number-based input. |
required | | Specifies that the input field is required; disallows form submission and alerts the user if the required field is empty. |
readonly | | Disallows the user from editing the value of the input. |
placeholder | | Specifies placeholder text in a text-based input. |
pattern | | Specifies a regular expression against which to validate the value of the input. |
multiple | | Allows the user to enter multiple values into a file upload or email input. |
min | | Specifies a minimum value for number and date input fields. |
max | | Specifies a maximum value for number and date input fields. |
list | | Specifies the id of a <datalist> element which provides a list of autocomplete suggestions for the input field. |
height | | Specifies the height of an image input. |
formtarget | | Specifies the browsing context in which to open the response from the server after form submission. For use only on input types of "submit" or "image". |
formmethod | | Specifies the HTTP method (GET or POST) to be used when the form data is submitted to the server. Only for use on input types of "submit" or "image". |
formenctype | | Specifies how form data should be submitted to the server. Only for use on input types "submit" and "image". |
formaction | | Specifies the URL for form submission. Can only be used for type="submit" and type="image". |
form | | Specifies a form to which the input field belongs. |
autofocus | | Specifies that the input field should be in focus immediately upon page load. |
maxlength | | Specifies the maximum number of characters that can be entered in a text-type input. |
src | | Defines the source URL for an image input. |
type | button checkbox file hidden image password radio reset submit text
| Defines the input type. |
value | | Defines an initial value or default selection for an input field. |
size | | Specifies the width of the input in characters. |
name | | Specifies the name of an input element. The name and value of each input element are included in the HTTP request when the form is submitted. |
language | | Was used to indicate the scripting language used for events triggered by the input. |
accesskey | | Defines a keyboard shortcut for the element. |
disabled | | Disables the input field. |
checked | | Specifies whether a checkbox or radio button form input should be checked by default. |
border | | Was used to specify a border on an input. Deprecated. Use CSS instead. |
autocomplete | | Specifies whether the browser should attempt to automatically complete the input based on user inputs to similar fields. |