<input type="password">

试一试

<div>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" />
</div>

<div>
  <label for="pass">Password (8 characters minimum):</label>
  <input type="password" id="pass" name="password" minlength="8" required />
</div>

<input type="submit" value="Sign in" />

label {
  display: block;
}

input[type="submit"],
label {
  margin-top: 1rem;
}

输入过程的具体行为可能因浏览器而异。有些浏览器在遮盖之前会短暂显示输入的字符，而另一些则允许用户切换纯文本的显示。这两种方法都有助于用户检查他们是否输入了预期的密码，这在移动设备上尤其困难。

值

value 属性包含一个字符串，其值是用于输入密码的文本编辑控件的当前内容。如果用户尚未输入任何内容，此值为空字符串 ("")。如果指定了 required 属性，则密码编辑框必须包含一个非空字符串才能有效。

如果指定了 pattern 属性，则 password 控件的内容只有在值通过验证后才被视为有效；有关更多信息，请参阅验证。

附加属性

除了全局属性以及适用于所有 <input> 元素（无论其类型如何）的属性外，密码字段输入还支持以下属性。

maxlength

用户可以在密码字段中输入的最大字符串长度（以 UTF-16 代码单元衡量）。这必须是一个 0 或更高的整数值。如果没有指定 maxlength，或者指定了无效值，则密码字段没有最大长度。此值还必须大于或等于 minlength 的值。

如果字段中输入的文本长度大于 maxlength UTF-16 代码单元，则输入将无法通过 约束验证。约束验证仅在用户更改值时应用。

minlength

用户可以在密码输入字段中输入的最小字符串长度（以 UTF-16 代码单元衡量）。这必须是一个非负整数值，小于或等于 maxlength 指定的值。如果没有指定 minlength，或者指定了无效值，则密码输入没有最小长度。

如果字段中输入的文本长度少于 minlength UTF-16 代码单元长，则输入将无法通过约束验证。约束验证仅在用户更改值时应用。

pattern

当指定 pattern 属性时，它是一个正则表达式，输入控件的 value 必须匹配该正则表达式才能通过约束验证。它必须是一个有效的 JavaScript 正则表达式，由 RegExp 类型使用，并记录在我们的正则表达式指南中；在编译正则表达式时指定 'u' 标志，以便将模式视为 Unicode 代码点序列，而不是 ASCII。模式文本周围不应指定正斜杠。

如果未指定或指定的模式无效，则不应用正则表达式，并且此属性将完全被忽略。

强烈建议密码输入使用模式，以帮助确保用户选择并使用包含各种字符类的有效密码。通过模式，您可以强制执行大小写规则，要求使用一定数量的数字和/或标点符号等。有关详细信息和示例，请参阅验证部分。

placeholder

placeholder 属性是一个字符串，它向用户提供一个简短的提示，说明字段中预期哪种信息。它应该是一个词或短语，演示预期的数据类型，而不是解释性消息。文本不能包含回车或换行符。

如果控件的内容具有单一方向性（从左到右或从右到左），但需要以相反的方向性呈现占位符，您可以使用 Unicode 双向算法格式字符来覆盖占位符内的方向性；有关更多信息，请参阅如何使用 Unicode 控件处理双向文本。

readonly

一个布尔属性，如果存在，则表示该字段不能由用户编辑。但是，其 value 仍然可以通过直接设置 HTMLInputElement.value 属性值的 JavaScript 代码来更改。

size

size 属性是一个数字值，表示输入字段应该有多宽（以字符为单位）。该值必须是一个大于零的数字，默认值为 20。由于字符宽度不同，这可能不完全精确，不应依赖于此；最终的输入可能比指定的字符数更窄或更宽，具体取决于字符和正在使用的字体（font 设置）。

这不限制用户可以在字段中输入的字符数。它只指定一次大约可以看到多少个字符。要对输入数据的长度设置上限，请使用maxlength 属性。

使用密码输入

密码输入框通常与其他文本输入框的工作方式相同；主要区别在于内容的模糊化，以防止用户附近的人阅读密码。

一个基本的密码输入

在这里我们看到了最基本的密码输入，使用 <label> 元素建立了一个标签。

<label for="userPassword">Password: </label>
<input id="userPassword" type="password" />

允许自动填充

要允许用户的密码管理器自动输入密码，请指定 autocomplete 属性。对于密码，这通常应该是以下之一：

启用

允许浏览器或密码管理器自动填充密码字段。这不如使用 current-password 或 new-password 提供的信息丰富。

关闭

不允许浏览器或密码管理器自动填充密码字段。请注意，某些软件会忽略此值，因为它通常有害于用户维护安全密码习惯的能力。

current-password

允许浏览器或密码管理器输入网站的当前密码。这比 on 提供更多信息，因为它允许浏览器或密码管理器自动在字段中输入网站当前已知的密码，但不建议新密码。

new-password

允许浏览器或密码管理器自动输入网站的新密码；这用于“更改密码”和“新用户”表单中，在要求用户输入新密码的字段上。新密码可以通过多种方式生成，具体取决于所使用的密码管理器。它可能会填写新的建议密码，或者向用户显示一个创建密码的界面。

<label for="userPassword">Password:</label>
<input id="userPassword" type="password" autocomplete="current-password" />

使密码成为必填项

要告诉用户的浏览器在提交表单之前密码字段必须具有有效值，请指定布尔 required 属性。

<label for="userPassword">Password: </label>
<input id="userPassword" type="password" required />
<input type="submit" value="Submit" />

指定输入模式

如果您的推荐（或要求）密码语法规则将受益于不同于标准键盘的替代文本输入界面，您可以使用 inputmode 属性请求特定的界面。最明显的用例是如果密码必须是数字（例如 PIN）。例如，带有虚拟键盘的移动设备可能会选择切换到数字键盘布局而不是完整键盘，以使输入密码更容易。如果 PIN 是一次性使用的，请将 autocomplete 属性设置为 off 或 one-time-code，以表明它未保存。

<label for="pin">PIN: </label>
<input id="pin" type="password" inputmode="numeric" />

设置长度要求

像往常一样，您可以使用 minlength 和 maxlength 属性来设置密码的最小和最大可接受长度。此示例在前面的示例基础上进行了扩展，指定用户的 PIN 码必须至少为四位且不超过八位。size 属性用于确保密码输入控件宽度为八个字符。

<label for="pin">PIN:</label>
<input
  id="pin"
  type="password"
  inputmode="numeric"
  minlength="4"
  maxlength="8"
  size="8" />

选择文本

与其他文本输入控件一样，您可以使用 select() 方法选择密码字段中的所有文本。

HTML

<label for="userPassword">Password: </label>
<input id="userPassword" type="password" size="12" />
<button id="selectAll">Select All</button>

JavaScript

document.getElementById("selectAll").onclick = () => {
  document.getElementById("userPassword").select();
};

结果

您还可以使用 selectionStart 和 selectionEnd 来获取（或设置）控件中当前选定的字符范围，以及使用 selectionDirection 来了解选择发生的或将扩展的方向（取决于您的平台；请参阅其文档以获取解释）。但是，鉴于文本被遮盖，这些功能的用处有限。

验证

如果您的应用程序对输入密码的实际内容有字符集限制或任何其他要求，您可以使用 pattern 属性建立一个正则表达式，用于自动确保您的密码符合这些要求。

在此示例中，只有由至少四位且不超过八位十六进制数字组成的值才有效。

<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" />

示例

请求社会安全号码

此示例仅接受符合有效美国社会安全号码格式的输入。这些号码在美国用于税务和身份识别目的，形式为“123-45-6789”。每组中允许哪些值也有各种规则。

HTML

<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>

这使用了 pattern 属性，它将输入值限制为表示合法社会安全号码的字符串。显然，这个正则表达式不能保证有效的 SSN（因为我们无法访问社会安全管理局的数据库），但它确实确保该号码可能是有效的；它通常避免了不可能有效的值。此外，它允许三组数字之间用空格、破折号 ("-") 或不分隔。

inputmode 设置为 numeric，以鼓励带有虚拟键盘的设备切换到数字键盘布局，以便更轻松地输入。minlength 和 maxlength 属性分别设置为 9 和 12，要求该值至少为 9 个字符且不超过 12 个字符（前者是指数字组之间没有分隔符，后者是指有分隔符）。required 属性用于指示此控件必须有一个值。最后，autocomplete 设置为 off，以避免密码管理器和会话恢复功能尝试设置其值，因为这根本不是密码。

JavaScript

JavaScript 在屏幕上显示输入的 SSN，以便您可以看到它。这违背了密码字段的目的，但它有助于试验 pattern。

const ssn = document.getElementById("ssn");
const current = document.getElementById("current");

ssn.oninput = (event) => {
  current.textContent = ssn.value;
};

结果

技术摘要

规范

浏览器兼容性