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

結果

技術摘要

規範

瀏覽器相容性