<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
用户代理
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 .
| 值 |
A
DOMString
representing a password, or empty
|
| 事件 |
change
and
input
|
| Supported Common Attributes |
autocomplete
,
inputmode
,
maxlength
,
minlength
,
pattern
,
placeholder
,
readonly
,
required
，和
size
|
| IDL attributes |
selectionStart
,
selectionEnd
,
selectionDirection
，和
value
|
| 方法 |
select()
,
setRangeText()
，和
setSelectionRange()
|
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.
若
pattern
attribute is specified, the content of a
password
control is only considered valid if the value passes validation; see
验证
了解更多信息。
注意：
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.
In addition to the attributes that operate on all
<input>
elements regardless of their type, password field inputs support the following attributes:
| 属性 | 描述 |
|---|---|
maxlength
|
The maximum length the value may be, in UTF-16 characters |
minlength
|
The minimum length in characters that will be considered valid |
pattern
|
A regular expression the value must match in order to be valid |
placeholder
|
An example value to display in the field when the field is empty |
readonly
|
A Boolean attribute which, if present, indicates that the field's contents should not be editable |
size
|
The number of characters wide the input field should be |
maxlength
The maximum number of characters (as UTF-16 code units) the user can enter into the password field. This must be an integer value 0 or higher. If no
maxlength
is specified, or an invalid value is specified, the password field has no maximum length. This value must also be greater than or equal to the value of
minlength
.
The input will fail
constraint validation
if the length of the text entered into the field is greater than
maxlength
UTF-16 code units long.
minlength
The minimum number of characters (as UTF-16 code units) the user can enter into the password entry field. This must be an non-negative integer value smaller than or equal to the value specified by
maxlength
. If no
minlength
is specified, or an invalid value is specified, the password input has no minimum length.
The input will fail
constraint validation
if the length of the text entered into the field is fewer than
minlength
UTF-16 code units long.
pattern
pattern
attribute, when specified, is a regular expression that the input's
value
must match in order for the value to pass
constraint validation
. It must be a valid JavaScript regular expression, as used by the
RegExp
type, and as documented in our
guide on regular expressions
；
'u'
flag is specified when compiling the regular expression, so that the pattern is treated as a sequence of Unicode code points, instead of as ASCII. No forward slashes should be specified around the pattern text.
If the specified pattern is not specified or is invalid, no regular expression is applied and this attribute is ignored completely.
提示：
使用
title
attribute to specify text that most browsers will display as a tooltip to explain what the requirements are to match the pattern. You should also include other explanatory text nearby.
Use of a pattern is strongly recommended for password inputs, in order to help ensure that valid passwords using a wide assortment of character classes are selected and used by your users. With a pattern, you can mandate case rules, require the use of some number of digits and/or punctuation characters, and so forth. See the section 验证 for details and an example.
placeholder
placeholder
attribute is a string that provides a brief hint to the user as to what kind of information is expected in the field. It should be a word or short phrase that demonstrates the expected type of data, rather than an explanatory message. The text
不必
include carriage returns or line feeds.
If the control's content has one directionality ( LTR or RTL ) but needs to present the placeholder in the opposite directionality, you can use Unicode bidirectional algorithm formatting characters to override directionality within the placeholder; see Overriding BiDi using Unicode control characters in The Unicode Bidirectional Text Algorithm for those characters.
注意：
Avoid using the
placeholder
attribute if you can. It is not as semantically useful as other ways to explain your form, and can cause unexpected technical issues with your content. See
Labels and placeholders
in
<input>: The Input (Form Input) element
了解更多信息。
readonly
A Boolean attribute which, if present, means this field cannot be edited by the user. Its
value
can, however, still be changed from JavaScript code that directly sets the value of the
HTMLInputElement.value
特性。
注意：
Because a read-only field cannot have a value,
required
does not have any effect on inputs with the
readonly
attribute also specified.
size
size
attribute is a numeric value indicating how many characters wide the input field should be. The value must be a number greater than zero, and the default value is 20. Since character widths vary, this may or may not be exact and should not be relied upon to be so; the resulting input may be narrower or wider than the specified number of characters, depending on the characters and the font (
font
settings in use).
This does
not
set a limit on how many characters the user can enter into the field. It only specifies approximately how many can be seen at a time. To set an upper limit on the length of the input data, use the
maxlength
属性。
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.
Here we see the most basic password input, with a label established using the
<label>
元素。
<label for="userPassword">Password: </label> <input id="userPassword" type="password">
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
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
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">
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
属性。
<label for="userPassword">Password: </label> <input id="userPassword" type="password" required> <input type="submit" value="Submit">
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. If the PIN is for one-time use, set the
autocomplete
attribute to either
off
or
one-time-code
to suggest that it's not saved.
<label for="pin">PIN: </label> <input id="pin" type="password" inputmode="numeric">
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">
As with other textual entry controls, you can use the
select()
method to select all the text in the password field.
<label for="userPassword">Password: </label> <input id="userPassword" type="password" size="12"> <button id="selectAll">Select All</button>
document.getElementById("selectAll").onclick = function() {
document.getElementById("userPassword").select();
}
还可以使用
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.
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"
autocomplete="new-password">
被禁用
This Boolean attribute indicates that the password field is not available for interaction. Additionally, disabled field values aren't submitted with the form.
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.
<label for="ssn">SSN:</label>
<input type="password" id="ssn" inputmode="numeric" 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.
inputmode
被设为
numeric
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
被设为
off
to avoid password managers and session restore features trying to set its value, since this isn't a password at all.
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;
}
| 规范 | 状态 | 注释 |
|---|---|---|
|
HTML 实时标准
The definition of '<input type="password">' in that specification. |
实时标准 | 初始定义 |
|
HTML 5.1
The definition of '<input type="password">' in that specification. |
推荐 | 初始定义 |
| 桌面 | 移动 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
type="password"
|
Chrome 完整支持 1 | Edge 完整支持 12 | Firefox 完整支持 1 | IE 完整支持 2 | Opera 完整支持 2 | Safari 完整支持 1 | WebView Android ? | Chrome Android 完整支持 Yes | Firefox Android 完整支持 4 | Opera Android 完整支持 Yes | Safari iOS 完整支持 Yes | Samsung Internet Android 完整支持 Yes |
| Special handling of password inputs in insecure login pages 非标 | Chrome 不支持 No | Edge 不支持 No | Firefox 完整支持 52 | IE 不支持 No | Opera 不支持 No | Safari 不支持 No | WebView Android 不支持 No | Chrome Android 不支持 No | Firefox Android 完整支持 52 | Opera Android 不支持 No | Safari iOS 不支持 No | Samsung Internet Android 不支持 No |
完整支持
不支持
兼容性未知
非标。预期跨浏览器支持较差。
<button>
<datalist>
<fieldset>
<form>
<input>
<label>
<legend>
<meter>
<optgroup>
<option>
<output>
<progress>
<select>
<textarea>
<input>
类型
<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">