Hướng dẫn how do you change a password in html? - Làm cách nào để bạn thay đổi mật khẩu trong html?

Thử nó

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

Lưu ý: Bất kỳ biểu mẫu nào liên quan đến thông tin nhạy cảm như mật khẩu (như biểu mẫu đăng nhập) nên được phục vụ qua HTTPS. Nhiều trình duyệt hiện thực hiện các cơ chế để cảnh báo chống lại các hình thức đăng nhập không an toàn; Xem mật khẩu không an toàn. Any forms involving sensitive information like passwords (such as login forms) should be served over HTTPS. Many browsers now implement mechanisms to warn against insecure login forms; see Insecure passwords.

Giá trị

Thuộc tính

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

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

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

Nếu thuộc tính

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

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

Lưu ý: Nguồn cấp dữ liệu dòng (U+000a) và các ký tự trả về vận chuyển (U+000D) không được phép trong giá trị

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

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

Thuộc tính bổ sung

Ngoài các thuộc tính hoạt động trên tất cả các yếu tố

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

Maxlength

Số lượng ký tự tối đa (như đơn vị mã UTF-16) Người dùng có thể nhập vào trường Mật khẩu. Đây phải là một giá trị số nguyên 0 hoặc cao hơn. Nếu không có

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

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

Đầu vào sẽ không thành công xác thực ràng buộc nếu độ dài của văn bản nhập vào trường lớn hơn

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

Độ dài nhỏ nhất

Số lượng ký tự tối thiểu (như các đơn vị mã UTF-16) Người dùng có thể nhập vào trường nhập mật khẩu. Đây phải là giá trị số nguyên không âm nhỏ hơn hoặc bằng giá trị được chỉ định bởi

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

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

Đầu vào sẽ không thành công xác thực ràng buộc nếu độ dài của văn bản nhập vào trường ít hơn các đơn vị mã UTF-16 dài hơn.

họa tiết

Thuộc tính

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

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

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

Nếu mẫu được chỉ định không được chỉ định hoặc 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.

Lưu ý: Sử dụng thuộc tính

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

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

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

người giữ chỗ

Thuộc tính

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

Nếu nội dung của điều khiển có một hướng (LTR hoặc RTL) nhưng cần trình bày trình giữ chỗ theo hướng ngược lại, bạn có thể sử dụng các ký tự định dạng thuật toán nhị phân Unicode để ghi đè tính định hướng trong trình giữ chỗ; Xem cách sử dụng các điều khiển Unicode cho văn bản BIDI để biết thêm thông tin.

Lưu ý: Tránh sử dụng thuộc tính

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

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

chỉ đọc

Một thuộc tính Boolean, nếu có, 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,

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

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

Lưu ý: Vì trường chỉ đọc không thể có giá trị,

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

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

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

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

kích thước

Thuộc tính

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

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

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

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

Sử dụng đầu vào mật khẩu

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

Một đầu vào mật khẩu đơn giản

Ở đây chúng tôi thấy đầu vào mật khẩu cơ bản nhất, với một nhãn được thiết lập bằng phần tử

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

<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, chỉ định thuộc tính

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

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

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. Đây không phải là thông tin như sử dụng

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

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

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

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 có hại cho khả năng của người dùng trong việc duy trì thực hành mật khẩu an toàn.

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

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

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

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

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 sử dụng trên các biểu mẫu "Thay đổi mật khẩu" và "người dùng mới", trên trường yêu cầu người dùng cho mật khẩu mới. Mật khẩu mới có thể được tạo theo nhiều cách khác nhau, 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 mật khẩu được đề xuất mới hoặc nó có thể hiển thị cho người dùng một giao diện để tạo một giao diện.

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

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

Để nói với 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, chỉ định thuộc tính Boolean

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

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

Chỉ định chế độ đầu vào

Nếu các quy tắc cú pháp mật khẩu được đề xuất (hoặc yêu cầu) của bạn sẽ được 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ể sử dụng thuộc tính

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

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

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

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

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

Thiết lập yêu cầu độ dài

Như thường lệ, bạn có thể sử dụng các thuộc tính

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

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

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

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

Chọn văn bản

Cũng như các điều khiển nhập văn bản khác, bạn có thể sử dụng phương thức

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

HTML

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

JavaScript

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

Kết quả

Bạn cũng có thể sử dụng

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

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

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

Thẩm định

Nếu ứng dụng của bạn có các hạn chế đặt ký tự hoặc bất kỳ yêu cầu nào khác đối với nội dung thực tế của mật khẩu đã nhập, bạn có thể sử dụng thuộc tính

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

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 là 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ụ

Xem thêm