<input type="password">

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

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

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

除了对所有 input 元素（无论其类型如何）起作用的属性外，密码字段输入还支持以下属性。

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

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

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

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

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

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

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

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

如果控件的内容具有单向性 (LTR 或 RTL)，但需要以相反的方向性显示占位符，您可以使用 Unicode 双向算法格式化字符来覆盖占位符内的方向性；有关更多信息，请参阅 如何使用 Unicode 控件进行双向文本。

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

size 属性是一个数值，指示输入字段的宽度应为多少个字符。 该值必须大于零，默认值为 20。 由于字符宽度不同，因此这可能并非完全准确，也不应依赖于此；生成的输入可能比指定的字符数更窄或更宽，具体取决于字符和字体 (font 设置)。

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

密码输入框通常与其他文本输入框的工作方式相同；主要区别在于内容被隐藏，以防止靠近用户的人看到密码。

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

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

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

on

允许浏览器或密码管理器自动填写密码字段。 这不如使用 current-password 或 new-password 更有信息量。

off

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

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

这只是一些简单的代码，用于在屏幕上显示输入的 SSN，以便您可以看到它。 显然，这会破坏密码字段的目的，但它有助于尝试 pattern。

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

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

结果

• CSS 属性的兼容性