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