Sau khi tìm hiểu về phần tử biểu mẫu và cách tạo biểu mẫu tương tác, hãy xem cách bạn có thể giúp người dùng tránh phải nhập lại dữ liệu.
Khai thác tối đa tính năng tự động điền
Việc điền vào biểu mẫu có thể tốn thời gian. Ví dụ: việc nhập lại địa chỉ của bạn nhiều lần trên mọi trang web mà bạn muốn mua hàng sẽ không phải là một trải nghiệm mua sắm tuyệt vời.
Tính năng tự động điền có thể giúp bạn tại đây. Bạn chỉ cần nhập địa chỉ của mình một lần. Từ bây giờ, trình duyệt sẽ cung cấp cho bạn tuỳ chọn để tự động điền cùng một địa chỉ cho các biểu mẫu khác.
Bạn đã chuyển đến một thành phố khác? Đừng lo lắng về việc lấy địa chỉ cũ làm lựa chọn vĩnh viễn. Bạn có thể chỉnh sửa dữ liệu địa chỉ mà trình duyệt của bạn đã lưu cho bạn để địa chỉ đó luôn mới nhất.
Tính năng tự động điền hoạt động như thế nào trong trình duyệt?
Trường địa chỉ có thể trông rất khác nhau trên các trang web khác nhau. Làm cách nào để trình duyệt biết đó là trường địa chỉ?
Trình duyệt sử dụng
phỏng đoán để xác định trường địa chỉ.
Giá trị của các thuộc tính name, type và id là gì?
Có thuộc tính autocomplete nào xuất hiện trong phần điều khiển biểu mẫu không?
Dựa trên thông tin này, các trình duyệt có thể cung cấp tuỳ chọn tự động điền một trường với dữ liệu cùng loại đã nhập trước đó. Thậm chí, các trình duyệt có thể đề xuất tự động điền toàn bộ biểu mẫu.
Trợ giúp trình duyệt về tính năng tự động điền
Hãy xem bạn có thể làm gì để giúp trình duyệt cung cấp đúng tuỳ chọn tự động điền.
Sử dụng giá trị thuộc tính hợp lý
Như bạn đã tìm hiểu, trình duyệt có thể xác định loại dữ liệu bằng cách xem xét các thuộc tính của một phần điều khiển biểu mẫu.
<label for="email">Email</label>
<input type="email" name="email" id="email">
Bạn có trường nào để người dùng nhập địa chỉ email của họ không?
Dùng email làm giá trị cho thuộc tính name, id và type.
Ba gợi ý cho trình duyệt rằng đây là trường email.
Thuộc tính tự động hoàn thành
Có một số ví dụ khác mà trình duyệt vẫn có thể gặp khó khăn khi chỉ xác định loại dữ liệu chỉ từ các thuộc tính name, id và type.
Bạn có thể trợ giúp trong trường hợp này bằng cách sử dụng thuộc tính autocomplete.
Trước đây, bạn đã nhập tên vào trình duyệt mà bạn sử dụng chưa? Trình duyệt có thể sẽ cung cấp cho bạn tuỳ chọn để điền lại trường này cho trường này trong bản minh hoạ.
Bạn có thể tìm hiểu thêm về cách sử dụng tự động hoàn thành và tự động điền trong mô-đun sau.
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
Tính năng tự động điền được cung cấp dựa trên những thuộc tính nào?
name.typeautocomplete