<input type="password">

Try it

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

Hành vi nhập chính xác có thể thay đổi từ trình duyệt này sang trình duyệt khác. Một số trình duyệt hiển thị ký tự được gõ trong một khoảnh khắc trước khi che khuất, trong khi các trình duyệt khác cho phép người dùng bật/tắt hiển thị văn bản thuần. Cả hai cách đều giúp người dùng kiểm tra rằng họ đã nhập đúng mật khẩu, điều này có thể đặc biệt khó khăn trên thiết bị di động.

Giá trị

Thuộc tính value chứa một chuỗi có giá trị là nội dung hiện tại của điều khiển chỉnh sửa văn bản được dùng để nhập mật khẩu. Nếu người dùng chưa nhập gì, giá trị này là chuỗi rỗng (""). Nếu thuộc tính required được chỉ định, thì hộp nhập mật khẩu phải chứa giá trị khác chuỗi rỗng mới hợp lệ.

Nếu thuộc tính pattern được chỉ định, nội dung của điều khiển password chỉ được coi là hợp lệ nếu giá trị vượt qua xác thực; xem Xác thực để biết thêm thông tin.

Thuộc tính bổ sung

Ngoài các thuộc tính toàn cục và các thuộc tính áp dụng cho tất cả các phần tử <input> bất kể kiểu, ô nhập mật khẩu hỗ trợ các thuộc tính sau.

maxlength

Độ dài chuỗi tối đa (đo bằng đơn vị mã UTF-16) mà người dùng có thể nhập vào trường mật khẩu. Đây phải là giá trị nguyên từ 0 trở lên. Nếu không có maxlength được chỉ định, hoặc một giá trị không hợp lệ được chỉ định, trường mật khẩu không có độ dài tối đa. Giá trị này cũng phải lớn hơn hoặc bằng giá trị của minlength.

Ô nhập sẽ không vượt qua xác thực ràng buộc nếu độ dài văn bản nhập vào trường lớn hơn maxlength đơn vị mã UTF-16. Xác thực ràng buộc chỉ được áp dụng khi giá trị được thay đổi bởi người dùng.

minlength

Độ dài chuỗi tối thiểu (đo bằng đơn vị mã UTF-16) mà người dùng có thể nhập vào trường nhập mật khẩu. Đây phải là giá trị nguyên không âm nhỏ hơn hoặc bằng giá trị được chỉ định bởi maxlength. Nếu không có minlength được chỉ định, hoặc một giá trị không hợp lệ được chỉ định, ô nhập mật khẩu không có độ dài tối thiểu.

Ô nhập sẽ không vượt qua xác thực ràng buộc nếu độ dài văn bản nhập vào trường nhỏ hơn minlength đơn vị mã UTF-16. Xác thực ràng buộc chỉ được áp dụng khi giá trị được thay đổi bởi người dùng.

pattern

Thuộc tính pattern, khi được chỉ định, là biểu thức chính quy mà value của ô nhập phải khớp để vượt qua xác thực ràng buộc. Nó phải là biểu thức chính quy JavaScript hợp lệ, như được dùng bởi kiểu RegExp, và được ghi lại trong hướng dẫn biểu thức chính quy của chúng ta; cờ 'u' được chỉ định khi biên dịch biểu thức chính quy, để mẫu được coi là chuỗi các điểm mã Unicode, thay vì ASCII. Không nên chỉ định dấu gạch chéo xung quanh văn bản mẫu.

Nếu mẫu được chỉ định không hợp lệ, không có biểu thức chính quy nào được áp dụng và thuộc tính này bị bỏ qua hoàn toàn.

Việc dùng mẫu được khuyến nghị mạnh mẽ cho ô nhập mật khẩu, nhằm giúp đảm bảo rằng mật khẩu hợp lệ sử dụng nhiều loại ký tự khác nhau được người dùng chọn và sử dụng. Với mẫu, bạn có thể yêu cầu quy tắc chữ hoa/thường, yêu cầu sử dụng một số chữ số và/hoặc ký tự dấu câu nhất định, v.v. Xem phần Xác thực để biết chi tiết và ví dụ.

placeholder

Thuộc tính placeholder là một chuỗi cung cấp gợi ý ngắn gọn cho người dùng về loại thông tin cần nhập vào trường. Nó phải là một từ hoặc cụm từ ngắn thể hiện kiểu dữ liệu mong đợi, thay vì một thông báo giải thích. Văn bản không được chứa ký tự xuống dòng hay dòng mới.

Nếu nội dung của điều khiển có một hướng (LTR hoặc RTL) nhưng cần hiển thị placeholder theo hướng ngược lại, bạn có thể dùng ký tự định dạng thuật toán bidirectional Unicode để ghi đè hướng trong placeholder; xem Cách sử dụng điều khiển Unicode cho văn bản bidi để biết thêm.

readonly

Thuộc tính Boolean, khi có mặt, có nghĩa là trường này không thể được chỉnh sửa bởi người dùng. Tuy nhiên, value của nó vẫn có thể được thay đổi từ mã JavaScript trực tiếp đặt giá trị của thuộc tính HTMLInputElement.value.

size

Thuộc tính size là giá trị số chỉ định số ký tự rộng của trường ô nhập. Giá trị phải là số lớn hơn không, và giá trị mặc định là 20. Vì độ rộng ký tự thay đổi, điều này có thể chính xác hoặc không và không nên dựa vào nó; ô nhập kết quả có thể hẹp hơn hoặc rộng hơn số ký tự được chỉ định, tùy thuộc vào ký tự và font chữ (cài đặt font đang được sử dụng).

Điều này không đặt giới hạn về số ký tự người dùng có thể nhập vào trường. Nó chỉ chỉ định xấp xỉ bao nhiêu ký tự có thể được nhìn thấy cùng một lúc. Để đặt giới hạn trên về độ dài dữ liệu nhập, hãy dùng thuộc tính maxlength.

Sử dụng ô nhập mật khẩu

Hộp nhập mật khẩu thường hoạt động giống như các hộp nhập văn bản khác; sự khác biệt chính là việc che khuất nội dung để ngăn những người gần người dùng đọc mật khẩu.

Ô nhập mật khẩu cơ bản

Đây là ô nhập mật khẩu cơ bản nhất, với nhãn được thiết lập bằng phần tử <label>.

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

Cho phép tự động hoàn thành

Để cho phép trình quản lý mật khẩu của người dùng tự động nhập mật khẩu, hãy chỉ định thuộc tính autocomplete. Đối với mật khẩu, điều này thường phải là một trong các giá trị sau:

on

Cho phép trình duyệt hoặc trình quản lý mật khẩu tự động điền vào trường mật khẩu. Điều này không có nhiều thông tin bằng current-password hoặc new-password.

off

Không cho phép trình duyệt hoặc trình quản lý mật khẩu tự động điền vào trường mật khẩu. Lưu ý rằng một số phần mềm bỏ qua giá trị này, vì nó thường gây hại cho khả năng người dùng duy trì thực hành mật khẩu an toàn.

current-password

Cho phép trình duyệt hoặc trình quản lý mật khẩu nhập mật khẩu hiện tại cho trang web. Điều này cung cấp nhiều thông tin hơn on, vì nó cho phép trình duyệt hoặc trình quản lý mật khẩu tự động nhập mật khẩu đã biết hiện tại cho trang web vào trường, nhưng không gợi ý mật khẩu mới.

new-password

Cho phép trình duyệt hoặc trình quản lý mật khẩu tự động nhập mật khẩu mới cho trang web; điều này được dùng trên các biểu mẫu "đổi mật khẩu" và "người dùng mới", trên trường yêu cầu người dùng nhập mật khẩu mới. Mật khẩu mới có thể được tạo theo nhiều cách, tùy thuộc vào trình quản lý mật khẩu đang sử dụng. Nó có thể điền vào mật khẩu gợi ý mới, hoặc hiển thị cho người dùng giao diện để tạo mật khẩu.

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

Làm mật khẩu bắt buộc

Để yêu cầu trình duyệt của người dùng rằng trường mật khẩu phải có giá trị hợp lệ trước khi biểu mẫu có thể được gửi, hãy chỉ định thuộc tính Boolean required.

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

Chỉ định chế độ nhập

Nếu các quy tắc cú pháp mật khẩu khuyến nghị (hoặc bắt buộc) của bạn hưởng lợi từ giao diện nhập văn bản thay thế so với bàn phím tiêu chuẩn, bạn có thể dùng thuộc tính inputmode để yêu cầu một giao diện cụ thể. Trường hợp sử dụng rõ ràng nhất là nếu mật khẩu phải là số (chẳng hạn mã PIN). Các thiết bị di động có bàn phím ảo, ví dụ, có thể chọn chuyển sang bố cục bàn phím số thay vì bàn phím đầy đủ, để dễ nhập mật khẩu hơn. Nếu PIN dùng một lần, hãy đặt thuộc tính autocomplete thành off hoặc one-time-code để gợi ý rằng nó không được lưu.

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

Đặt yêu cầu độ dài

Như thường lệ, bạn có thể dùng các thuộc tính minlength và maxlength để thiết lập độ dài tối thiểu và tối đa chấp nhận được cho mật khẩu. Ví dụ này mở rộng ví dụ trước bằng cách chỉ định rằng PIN của người dùng phải có ít nhất bốn và không quá tám chữ số. Thuộc tính size được dùng để đảm bảo điều khiển nhập mật khẩu rộng tám ký tự.

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

Chọn văn bản

Như với các điều khiển nhập văn bản khác, bạn có thể dùng phương thức select() để chọn tất cả văn bản trong trường mật khẩu.

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

Kết quả

Bạn cũng có thể dùng selectionStart và selectionEnd để lấy (hoặc đặt) phạm vi ký tự nào trong điều khiển đang được chọn, và selectionDirection để biết hướng chọn xảy ra (hoặc sẽ được mở rộng, tùy thuộc vào nền tảng của bạn; xem tài liệu của nó để biết giải thích). Tuy nhiên, do văn bản bị che khuất, tính hữu ích của chúng có phần hạn chế.

Xác thực

Nếu ứng dụng của bạn có các hạn chế bộ ký tự hoặc bất kỳ yêu cầu nào khác cho nội dung thực tế của mật khẩu được nhập, bạn có thể dùng thuộc tính pattern để thiết lập biểu thức chính quy được dùng để tự động đảm bảo mật khẩu của bạn đáp ứng các yêu cầu đó.

Trong ví dụ này, chỉ các giá trị bao gồm ít nhất bốn và không quá tám chữ số thập lục phân mới hợp lệ.

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

Ví dụ

Yêu cầu Số An Sinh Xã Hội

Ví dụ này chỉ chấp nhận đầu vào khớp với định dạng Số An Sinh Xã Hội Hoa Kỳ hợp lệ. Các số này, được dùng cho mục đích thuế và nhận dạng ở Hoa Kỳ, có dạng "123-45-6789". Có nhiều quy tắc về giá trị nào được phép trong mỗi nhóm.

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>

Điều này dùng pattern giới hạn giá trị nhập thành các chuỗi đại diện cho Số An Sinh Xã Hội hợp lệ. Rõ ràng, regex này không đảm bảo SSN hợp lệ (vì chúng ta không có quyền truy cập vào cơ sở dữ liệu của Cơ quan An Sinh Xã Hội), nhưng nó đảm bảo số có thể là một số; nó thường tránh các giá trị không thể hợp lệ. Ngoài ra, nó cho phép ba nhóm chữ số được phân cách bằng dấu cách, dấu gạch ngang ("-"), hoặc không có gì.

inputmode được đặt thành numeric để khuyến khích các thiết bị có bàn phím ảo chuyển sang bố cục bàn phím số để dễ nhập hơn. minlength và maxlength được đặt lần lượt là 9 và 12, để yêu cầu giá trị có ít nhất chín và không quá 12 ký tự. Thuộc tính required được dùng để chỉ định rằng điều khiển này phải có giá trị. Cuối cùng, autocomplete được đặt thành off để tránh trình quản lý mật khẩu và tính năng khôi phục phiên cố đặt giá trị của nó, vì đây không phải là mật khẩu.

JavaScript

JavaScript hiển thị SSN đã nhập trên màn hình để bạn có thể xem nó. Điều này không có tác dụng của trường mật khẩu, nhưng nó giúp thử nghiệm với pattern.

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

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

Kết quả

Tóm tắt kỹ thuật

Thông số kỹ thuật

Tương thích trình duyệt