Phải nhập lại địa chỉ lần thứ mười thật mệt mỏi. Trình duyệt và bạn
với vai trò nhà phát triển, có thể giúp người dùng nhập dữ liệu nhanh hơn và tránh phải nhập lại dữ liệu.
Mô-đun này hướng dẫn bạn cách hoạt động của tính năng tự động điền, cũng như cách autocomplete và các
có thể đảm bảo rằng trình duyệt cung cấp các tuỳ chọn tự động điền thích hợp.
Tính năng tự động điền hoạt động như thế nào?
Trong bài viết giới thiệu về tính năng tự động điền, bạn đã tìm hiểu những kiến thức cơ bản về tính năng tự động điền tự động điền. Nhưng tại sao các trình duyệt lại có tính năng tự động điền?
Điền vào biểu mẫu không phải là một hoạt động thú vị, nhưng bạn vẫn có thể làm thường xuyên. Theo thời gian, bạn điền vào nhiều biểu mẫu và bạn thường điền vào cùng một dữ liệu. Một cách giúp người dùng điền vào biểu mẫu nhanh hơn là cung cấp cho họ tùy chọn để tự động điền dữ liệu đã nhập trước đó vào các trường biểu mẫu. Đó là tính năng tự động điền.
Làm cách nào để trình duyệt biết cần tự động điền dữ liệu nào? Hãy xem một biểu mẫu mẫu để tìm hiểu.
<label for="name">Name</label>
<input name="name" id="name">
Nếu bạn gửi trường biểu mẫu này, trình duyệt sẽ lưu trữ giá trị (dữ liệu mà bạn đã nhập)
cùng với giá trị của thuộc tính name (tên). Một số trình duyệt cũng xem xét
thuộc tính id khi lưu trữ và điền dữ liệu.
Giả sử vài tuần sau đó, bạn điền vào một biểu mẫu khác trên một trang web khác. Trang web này cũng
chứa trường biểu mẫu có name="name". Trình duyệt của bạn hiện có thể cung cấp tính năng tự động điền,
vì hệ thống đã lưu trữ một giá trị cho name.
Tính năng tự động điền đặc biệt hữu ích trong các biểu mẫu mà bạn thường sử dụng, chẳng hạn như khi đăng ký và đăng nhập, thanh toán, thanh toán và biểu mẫu mà bạn phải nhập tên của mình hoặc của bạn.
Bạn có thể giúp các trình duyệt cung cấp các tuỳ chọn tự động điền tốt nhất bằng cách sử dụng
cho thuộc tính autocomplete. Có nhiều giá trị có thể có cho autocomplete. Sau đây là ví dụ về địa chỉ.
Trình duyệt của bạn đã lưu địa chỉ cho bạn chưa? Tuyệt vời! Sau khi tương tác với trường đầu tiên trong biểu mẫu địa chỉ, trình duyệt sẽ hiển thị cho bạn một danh sách địa chỉ đã lưu. Bạn có thể chọn một mục và trình duyệt sẽ điền vào tất cả các trường liên quan đến địa chỉ. Tính năng tự động điền giúp việc điền biểu mẫu trở nên nhanh chóng và dễ dàng.
Không phải mọi biểu mẫu địa chỉ đều có các trường giống nhau và thứ tự của các trường cũng thay đổi.
Việc sử dụng các giá trị chính xác cho autocomplete sẽ đảm bảo rằng trình duyệt sẽ điền vào
các giá trị chính xác cho một biểu mẫu. Có các giá trị cho country, postal-code,
và nhiều
.
Đảm bảo người dùng có thể đăng nhập nhanh chóng và sử dụng mật khẩu an toàn
Nhiều người không nhớ rõ mật khẩu. Thông tin phổ biến nhất mật khẩu là "123456", theo sau là các tổ hợp dễ nhớ khác. Cách sử dụng mật khẩu an toàn và duy nhất mà không cần phải nhớ tất cả?
Trình duyệt có tích hợp sẵn trình quản lý mật khẩu để tạo, lưu và điền mật khẩu mật khẩu cho bạn. Xem cách bạn có thể trợ giúp các trình duyệt bằng tính năng tự động điền email và quản lý mật khẩu.
Bạn có thể dùng autocomplete="email" cho trường email để người dùng có thể sử dụng tính năng tự động điền
dành cho địa chỉ email.
Do đây là biểu mẫu đăng ký nên trước đây người dùng sẽ không thể điền vào biểu mẫu
mật khẩu bạn đã sử dụng. Bạn có thể dùng autocomplete="new-password" để đảm bảo trình duyệt
cung cấp tuỳ chọn tạo mật khẩu mới.
Trên biểu mẫu đăng nhập, bạn có thể sử dụng autocomplete="current-password" để cho biết
các trình duyệt sẽ cung cấp tuỳ chọn để điền mật khẩu đã lưu trước đó cho
của bạn.
Bạn có thể thiết lập tính năng xác thực hai yếu tố trên nhiều trang web. Ngoài mật khẩu, mã một lần được gửi qua SMS hoặc ứng dụng xác thực hai yếu tố.
Sẽ không tuyệt vời sao nếu mã bạn nhận được trong tin nhắn SMS được đề xuất
bằng bàn phím ảo và bạn có thể trực tiếp chọn để điền vào
giá trị? Trên Safari 14 trở lên, bạn có thể sử dụng
autocomplete="one-time-code"
để đạt được mục tiêu này. Trên Chrome trên Android, bạn có thể sử dụng tệp WebOTP
API để đạt được
thực hiện việc này bằng JavaScript.
Tìm hiểu thêm về cách xác minh số điện thoại trên web bằng biểu mẫu OTP qua SMS các phương pháp hay nhất.
Giúp người dùng điền thông tin thẻ tín dụng của họ
Trên nhiều trang web thương mại điện tử, bạn có thể sử dụng thẻ tín dụng để mua sản phẩm. Các trang web có thể sử dụng nền tảng thanh toán của bên thứ ba để cung cấp biểu mẫu riêng, nhưng nếu bạn cần tạo biểu mẫu thanh toán của riêng mình, hãy đảm bảo mọi người có thể dễ dàng điền vào thông tin thanh toán.
Bạn có thể sử dụng lại thuộc tính autocomplete để đảm bảo trình duyệt cung cấp
chính xác các tuỳ chọn tự động điền.
Có các giá trị cho số thẻ tín dụng cc-number, ngày hết hạn của thẻ tín dụng
ngày cc-exp và tất cả thông tin khác
cần thiết
cho một khoản thanh toán bằng thẻ tín dụng.
Sử dụng một mục nhập duy nhất cho các số như số thẻ tín dụng và số điện thoại
để đảm bảo trình duyệt có cung cấp tính năng tự động điền. Sử dụng các thành phần biểu mẫu chuẩn, cho
ví dụ: <select> cho ngày của thẻ thanh toán thay vì các phần tử tuỳ chỉnh để
hãy đảm bảo tính năng tự động hoàn thành có sẵn.
Tìm hiểu thêm về cách giúp người dùng tránh nhập lại khoản thanh toán .
Đảm bảo tính năng tự động điền hoạt động với tất cả các trường
Ngoài địa chỉ, thông tin tài khoản và thông tin thẻ tín dụng, có nhiều trường khác mà trình duyệt có thể giúp người dùng tự động điền.
Khi thêm trường số điện thoại vào biểu mẫu, hãy kiểm tra xem bạn có thể sử dụng bất kỳ có sẵn giá trị để tự động hoàn thành. Bạn tìm thấy giá trị phù hợp cho trường biểu mẫu của mình? Thêm.
Việc sử dụng các giá trị phù hợp cho thuộc tính autocomplete sẽ giúp trình duyệt cung cấp
lựa chọn tự động điền tốt nhất và giúp người dùng điền vào biểu mẫu nhanh hơn.
Giúp trình duyệt hiểu rằng một trường không nên được tự động điền
Bạn đã tìm hiểu cách thức hoạt động của tính năng tự động điền, cách bạn có thể hỗ trợ các trình duyệt để tự động điền cũng như lý do tính năng tự động điền giúp người dùng điền vào biểu mẫu thuận tiện. Tuy nhiên, đôi khi bạn không muốn trình duyệt cung cấp tính năng tự động điền.
<label for="one-time-code">One-time code</label>
<input autocomplete="off" type="text" name="one-time-code" id="one-time-code">
Tính năng tự động điền không hữu ích là khi bạn nhập các giá trị duy nhất một lần
chẳng hạn như trường mã một lần. Giá trị mỗi lần lại khác nhau và
trình duyệt không được lưu giá trị hoặc cung cấp tuỳ chọn tự động điền. Bạn có thể sử dụng
autocomplete="off" cho các trường đó để ngăn tính năng tự động điền.
Một trường hợp sử dụng khác cho autocomplete="off" là trường mật ong (xem trang trước
mô-đun). Mặc dù trường này
có thể nhìn thấy, trình duyệt có thể tự động điền nó với các trường còn lại. Đang bật tính năng tự động điền
tắt đảm bảo người dùng thực không được xác định là bot, do trường này
hoàn tất tự động.
Bạn chỉ nên tắt tính năng tự động điền nếu chắc chắn rằng tính năng này sẽ hữu ích với người dùng.
Kiểm tra kiến thức
Kiểm tra kiến thức của bạn về tính năng tự động điền
Bạn nên sử dụng giá trị tự động hoàn thành nào cho trường mật khẩu trong biểu mẫu đăng ký?
autocomplete="password"autocomplete="off"autocomplete="new-password"autocomplete="current-password"