Thuộc tính autocomplete của phần tử <input> cho phép bạn thiết lập xem tính năng tự động hoàn thành cho ô nhập liệu có bật (on) hay tắt (off). Trình duyệt sẽ tự động điền các giá trị nếu autocomplete được bật. Điều này chỉ xảy ra khi người dùng đã từng nhập giá trị trước đó.
Cú pháp như sau:
<input autocomplete="on|off">
Ở trên, giá trị on | off được thiết lập cho autocomplete để hiển thị hay không. Đặt on nếu bạn muốn trình duyệt tự động hoàn thành các mục dựa trên các giá trị đã nhập trước đó, trong khi off không cho phép hoàn thành các mục.
Ví dụ
<!DOCTYPE html> <html> <body> <h2>Điểm số</h2> <form action = "" method = "get"> Cầu thủ − <input type = "text" name = "player" autocomplete = "on"><br> Xếp hạng − <input type = "number" name = "rank"><br> Điểm − <input type = "number" name = "pts"><br> <button type = "submit" value = "Submit">Gửi</button> </form> </body> </html>
Điều này sẽ tạo ra kết quả sau. Giả sử chúng ta đã nhập một số giá trị trước đó và bây giờ chúng ta đã bật autocomplete:
Trong ví dụ trên, chúng ta đã thêm một form:
<form action = "" method = "get"> Cầu thủ − <input type = "text" name = "player" autocomplete = "on"><br> Xếp hạng − <input type = "number" name = "rank"><br> Điểm − <input type = "number" name = "pts"><br> <button type = "submit" value = "Submit">Gửi</button> </form>
Chúng ta đã đặt autocomplete là on cho một trong các ô nhập liệu:
Cầu thủ − <input type = "text" name = "player" autocomplete = "on">
Do đó, khi bạn đặt con trỏ vào ô nhập liệu Cầu thủ, bạn sẽ thấy các giá trị đã nhập trước đó.