<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 屬性的相容性