Nếu phải nhập lại địa chỉ lần thứ mười thì mệt mỏi. Các 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, cách autocomplete và 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 tuỳ chọn tự động điền thích 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 các kiến thức cơ bản về tính năng tự động điền. Nhưng tại sao các trình duyệt lại cung cấp tính năng tự động điền?
Việc đ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 điền vào nhiều biểu mẫu và bạn 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ọ tuỳ 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 thế nào để trình duyệt biết dữ liệu nào cần tự động điền? Hãy xem trường 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 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 với name="name". Trình duyệt hiện 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, những 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 các trình duyệt đưa ra các tuỳ chọn tự động điền tốt nhất bằng cách sử dụng các giá trị thích hợp cho thuộc tính autocomplete. Có thể có nhiều giá trị cho autocomplete. Dưới đây là ví dụ về địa chỉ.
Trình duyệt của bạn đã có địa chỉ được lưu cho bạn chưa? Vậy thì tuyệt quá! 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 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 bạn điền vào biểu mẫu 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 khác nhau.
Việc sử dụng các giá trị chính xác cho autocomplete giúp đảm bảo rằng trình duyệt sẽ điền đúng giá trị cho 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 chóng và sử dụng mật khẩu an toàn
Nhiều người không giỏi nhớ mật khẩu. Mật khẩu phổ biến nhất là "123456", theo sau là các tổ hợp dễ nhớ khác. Làm cách nào để sử dụng mật khẩu an toàn và duy nhất mà không cần nhớ tất cả?
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 các 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 trường email để người dùng có được tuỳ 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 sẽ không có tuỳ chọn điền mật khẩu đã sử dụng trước đó. Bạn có thể sử dụng autocomplete="new-password" để đảm bảo các 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" để yêu cầu trình duyệt cung cấp tuỳ 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ã một lần sẽ được gửi qua SMS hoặc ứng dụng xác thực hai yếu tố.
Nếu mã bạn nhận được trong tin nhắn SMS do bàn phím ảo đề xuất và bạn có thể trực tiếp chọn mã đó để điền vào giá trị thì sẽ không tuyệt vời sao? Trên Safari 14 trở lên, bạn có thể sử 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 API WebOTP để đạt được mục tiêu 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 tin nhắn SMS.
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ể sử dụng thẻ tín dụng để mua sản phẩm. Các trang web có thể 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 xây dựng 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 các trình duyệt cung cấp đúng 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 thẻ tín dụng 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 dữ liệu đầu vào duy nhất cho các số, chẳng hạn 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 chuẩn, ví dụ: <select> cho ngày của thẻ thanh toán thay vì các phần tử tuỳ chỉnh, để đả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 dữ liệu thanh toán.
Đảm bảo tính năng tự động điền hoạt động đối 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, trình duyệt có thể giúp người dùng tự động điền vào nhiều trường khác.
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ỳ giá trị hiện có nào để tự động hoàn thành hay không. Bạn tìm thấy một giá trị thích 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 giúp trình duyệt cung cấp tuỳ 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 không nên tự động điền một trường
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ể giúp trình duyệt sử dụng tính năng 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 hơn. Tuy nhiên, đôi khi bạn không muốn các 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 điểm mà tính năng tự động điền không hữu ích là khi nhập các giá trị duy nhất một lần, chẳng hạn như trường mã dùng một lần. Giá trị luôn thay đổi và trình duyệt không nên lưu giá trị hoặc cung cấp tuỳ chọn tự động điền. Bạn có thể 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 mô-đun trước đó). Mặc dù trường này không hiển thị, nhưng các trình duyệt có thể tự động điền vào trường này với các trường còn lại. Khi bạn tắt tính năng tự động điền, hệ thống sẽ tự động hoàn tất trường này để đảm bảo người dùng thực không bị xác định là bot.
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 ích cho người dùng.
Kiểm tra kiến thức
Kiểm tra kiến thức 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"