<input>
elements of type "password"
provide a way for the user to securely enter a password. The element is presented as a one-line plain text editor control in which the text is obscured so that it cannot be read, usually by replacing each character with a symbol such as the asterisk ("*") or a dot ("•"). This character will vary depending on the user agent and OS.
Specifics of how the entry process works may vary from browser to browser; mobile devices, for example, often display the typed character for a moment before obscuring it, to allow the user to be sure they pressed the key they meant to press; this is helpful given the small size of keys and the ease with which the wrong one can be pressed, especially on virtual keyboards.
Any forms involving sensitive information like passwords (e.g. login forms) should be served over HTTPS; Many browsers now implement mechanisms to warn against insecure login forms; see Insecure passwords.
<input id="userPassword" type="password">
Value | A DOMString representing a password, or empty |
Events | change and input |
Supported Common Attributes | autocomplete , inputmode , maxlength , minlength , pattern , placeholder , readonly , required , and size |
IDL attributes | selectionStart , selectionEnd , selectionDirection , and value |
Methods | select() , setRangeText() , and setSelectionRange() |
Value
The value
attribute contains a DOMString
whose value is the current contents of the text editing control being used to enter the password. If the user hasn't entered anything yet, this value is an empty string (""
). If the required
property is specified, then the password edit box must contain a value other than an empty string to be valid.
If the pattern
attribute is specified, the content of a "password"
control is only considered valid if the value passes validation; see Validation for more information.
The line feed (U+000A) and carriage return (U+000D) characters are not permitted in a "password"
value. When setting the value of a password control, line feed and carriage return characters are stripped out of the value.
Using password inputs
Password input boxes generally work just like other textual input boxes; the main difference is the obscuring of the content to prevent people near the user from reading the password.
A simple password input
Here we see the most basic password input, with a label established using the <label>
element.
<label for="userPassword">Password: </label> <input id="userPassword" type="password">
Allowing autocomplete
To allow the user's password manager to automatically enter the password, specify the autocomplete
attribute. For passwords, this should typically be one of the following:
"on"
- Allow the browser or a password manager to automatically fill out the password field. This isn't as informative as using either
"current-password"
or"new-password"
. "off"
- Don't allow the browser or password manager to automatically fill out the password field. Note that some software ignores this value, since it's typically harmful to users' ability to maintain safe password practices.
"current-password"
- Allow the browser or password manager to enter the current password for the site. This provides more information than
"on"
does, since it lets the browser or password manager automatically enter currently-known password for the site in the field, but not to suggest a new one. "new-password"
- Allow the browser or password manager to automatically enter a new password for the site; this is used on "change your password" and "new user" forms, on the field asking the user for a new password. The new password may be generated in a variety of ways, depending on the password manager in use. It may simply fill in a new suggested password, or it might show the user an interface for creating one.
<label for="userPassword">Password:</label> <input id="userPassword" type="password" autocomplete="current-password">
Making the password mandatory
To tell the user's browser that the password field must have a valid value before the form can be submitted, simply specify the Boolean required
attribute.
<label for="userPassword">Password: </label> <input id="userPassword" type="password" required> <input type="submit" value="Submit">
Specifying an input mode
If your recommended (or required) password syntax rules would benefit from an alternate text entry interface than the standard keyboard, you can use the inputmode
attribute to request a specific one. The most obvious use case for this is if the password is required to be numeric (such as a PIN). Mobile devices with virtual keyboards, for example, may opt to switch to a numeric keypad layout instead of a full keyboard, to make entering the password easier.
<label for="pin">PIN: </label> <input id="pin" type="password" inputmode="numeric">
Setting length requirements
As usual, you can use the minlength
and maxlength
attributes to establish minimum and maximum acceptable lengths for the password. This example expands on the previous one by specifying that the user's PIN must be at least four and no more than eight digits. The size
attribute is used to ensure that the password entry control is eight characters wide.
<label for="pin">PIN:</label> <input id="pin" type="password" inputmode="numeric" minlength="4" maxlength="8" size="8">
Selecting text
As with other textual entry controls, you can use the select()
method to select all the text in the password field.
HTML
<label for="userPassword">Password: </label> <input id="userPassword" type="password" size="12"> <button id="selectAll">Select All</button>
JavaScript
document.getElementById("selectAll").onclick = function() { document.getElementById("userPassword").select(); }
Result
You can also use selectionStart
and selectionEnd
to get (or set) what range of characters in the control are currently selected, and selectionDirection
to know which direction selection occurred in (or will be extended in, depending on your platform; see its documentation for an explanation). However, given that the text is obscured, the usefulness of these is somewhat limited.
Validation
If your application has character set restrictions or any other requirement for the actual content of the entered password, you can use the pattern
attribute to establish a regular expression to be used to automatically ensure that your passwords meet those requirements.
In this example, only values consisting of at least four and no more than eight hexadecimal digits are valid.
<label for="hexId">Hex ID: </label> <input id="hexId" type="password" pattern="[0-9a-fA-F]{4,8}" title="Enter an ID consisting of 4-8 hexadecimal digits">
disabled
-
This Boolean attribute indicates that the password field is not available for interaction. Additionally, disabled field values aren't submitted with the form.
Examples
Requesting a Social Security number
This example only accepts input which matches the format for a valid United States Social Security Number. These numbers, used for tax and identification purposes in the US, are in the form "123-45-6789". Assorted rules for what values are permitted in each group exist as well.
HTML
<label for="ssn">SSN:</label> <input type="password" id="ssn" inputmode="number" minlength="9" maxlength="12" pattern="(?!000)([0-6]\d{2}|7([0-6]\d|7[012]))([ -])?(?!00)\d\d\3(?!0000)\d{4}" required autocomplete="off"> <br> <label for="ssn">Value:</label> <span id="current"></span>
This uses a pattern
which limits the entered value to strings representing legal Socal Security numbers. Obviously, this regexp doesn't guarantee a valid SSN (since we don't have access to the Social Security Administration's database), but it does ensure the number could be one; it generally avoids values that cannot be valid. In addition, it allows the three groups of digits to be separated by a space, a dash ("-"), or nothing.
Isn't that regular expression just beautiful?
The inputmode
is set to "number"
to encourage devices with virtual keyboards to switch to a numeric keypad layout for easier entry. The minlength
and maxlength
attributes are set to 9 and 12, respectively, to require that the value be at least nine and no more than 12 characters (the former without separating characters between the groups of digits and the latter with them). The required
attribute is used to indicate that this control must have a value. Finally, autocomplete
is set to "off"
to avoid password managers trying to set its value, since this isn't a password at all.
JavaScript
This is just some simple code to display the entered SSN onscreen so you can see it. Obviously this defeats the purpose of a password field, but it's helpful for experimenting with the pattern
.
var ssn = document.getElementById("ssn"); var current = document.getElementById("current"); ssn.oninput = function(event) { current.innerHTML = ssn.value; }
Result
Specifications
Specification | Status | Comment |
---|---|---|
HTML Living Standard The definition of '<input type="password">' in that specification. |
Living Standard | Initial definition |
HTML 5.1 The definition of '<input type="password">' in that specification. |
Recommendation | Initial definition |
Browser compatibility
We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 1.0 | 1.0 (1.7 or earlier) | 2 | 1.0 | 1.0 |
accesskey | 1.0 | (Yes) | 6 | 1.0 | ? |
autocomplete | 17.0 | 4.0 (2.0) | 5 | 9.6 | 5.2 |
autofocus | 5.0 | 4.0 (2.0) | 10 | 9.6 | 5.0 |
disabled | 1.0 | 1.0 (1.7 or earlier)[4] | 6 | 1.0 | 1.0 |
form | 9.0 | 4.0 (2.0) | ? | 10.62 | ? |
formaction | 9.0 | 4.0 (2.0) | 10 | 10.62 | 5.2 |
formenctype | 9.0 | 4.0 (2.0) | 10 | 10.62 | ? |
formmethod | 9.0 | 4.0 (2.0) | 10 | 10.62 | 5.2 |
formnovalidate | 5.0[1] | 4.0 (2.0) | 10 | 10.62 | ? |
formtarget | 9.0 | 4.0 (2.0) | 10 | 10.62 | 5.2 |
inputmode | No support | No support | No support | No support | No support |
maxlength | 1.0 | 1.0 (1.7 or earlier) | 2 | 1.0 | 1.0 |
minlength | 40.0 | ? | ? | ? | ? |
name | 1.0 | 1.0 (1.7 or earlier) | 2 | 1.0 | 1.0 |
pattern | 5.0 | 4.0 (2.0) | 10 | 9.6 | No support |
placeholder | 10.0 | 4.0 (2.0) | 10 | 11.00 | 5.0 |
readonly | 1.0 | 1.0 (1.7 or earlier) | 6[2] | 1.0 | 1.0 |
required | 5.0 10[3] |
4.0 (2.0) | 10 | 9.6 | No support |
size | 1.0 | 1.0 (1.7 or earlier) | 2 | 1.0 | 1.0 |
Crossed out lock in address bar to indicate insecure login page | Implementing something similar | 51 (51) | ? | ? | ? |
Message displayed next to password field to indicate insecure login page, plus autofill disabled | No support | 52 (52) | No support | No support | No support |
Feature | Chrome mobile | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | (Yes) | 4.0 (2.0) | (Yes) | (Yes) | (Yes) |
accesskey | ? | ? | ? | ? | ? |
autocomplete | ? | 4.0 (2.0) | (Yes) | (Yes) | (Yes) |
autofocus | 3.2 | 4.0 (2.0) | ? | (Yes) | ? |
disabled | (Yes) | 4.0 (2.0) | (Yes) | (Yes) | (Yes) |
form | ? | ? | ? | ? | ? |
formaction | ? | 4.0 (2.0) | ? | 10.62 | 5.0 |
formenctype | ? | ? | ? | ? | ? |
formmethod | ? | 4.0 (2.0) | ? | 10.62 | 5.0 |
formnovalidate | ? | 4.0 (2.0) | ? | 10.62 | ? |
formtarget | ? | 4.0 (2.0) | ? | 10.62 | 5.0 |
inputmode | No support | No support | No support | No support | No support |
maxlength | (Yes) | 4.0 (2.0) | (Yes) | (Yes) | (Yes) |
minlength | ? | ? | ? | 27.0 | ? |
name | (Yes) | 4.0 (2.0) | (Yes) | (Yes) | 1.0 |
pattern | ? | 4.0 (2.0) | ? | (Yes) | (Yes) |
placeholder | 2.3 | 4.0 (2.0) | ? | 11.10 | 4 |
required | ? | (Yes) | ? | (Yes) | ? |
size | (Yes) | 4.0 (2.0) | (Yes) | (Yes) | (Yes) |
Crossed out lock in address bar to indicate insecure login page | Implementing something similar | 51.0 (51) | ? | ? | ? |
Message displayed next to password field to indicate insecure login page, plus autofill disabled | No support | 52.0 (52) | No support | No support | No support |
[1] In 6.0 it only worked with the HTML5 document type, validation support in 7.0 was disabled and re-enabled in 10.0.
[2] Missing for type="checkbox"
and type="radio"
.
[3] Supported for <select>
element.
[4] Firefox will, unlike other browsers, by default, persist the dynamic disabled state and (if applicable) dynamic checkedness of an <input>
across page loads. Setting the value of the autocomplete
attribute to off
disables this feature; this works even when the autocomplete
attribute would normally not apply to the <input>
by virtue of its type
. See bug 654072.