Sau khi tìm hiểu về thành phần biểu mẫu và cách tạo một 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 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 phải 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 mang lại 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 trong trường hợp này. Bạn chỉ cần nhập địa chỉ một lần. Từ giờ trở đi, trình duyệt sẽ 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 địa chỉ cũ sẽ luôn là một lựa chọn. Bạn có thể chỉnh sửa dữ liệu địa chỉ mà trình duyệt đã lưu để luôn cập nhật.
Cơ chế 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. 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 pháp 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 trên thành phần điều khiển biểu mẫu không?
Dựa trên thông tin này, trình duyệt có thể cung cấp tuỳ chọn tự động điền một trường bằng dữ liệu đã nhập trước đó thuộc cùng loại. Trình duyệt thậm chí có thể tự động điền toàn bộ biểu mẫu.
Giúp trình duyệt tự động điền
Hãy xem những việc bạn có thể làm để giúp trình duyệt cung cấp các lựa chọn tự động điền chính xác.
Sử dụng các 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 các thuộc tính của thành 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 để người dùng nhập địa chỉ email không?
Sử 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ó những ví dụ khác mà trình duyệt vẫn khó xác định loại dữ liệu chỉ từ các thuộc tính name, id và type.
Bạn có thể giúp đỡ ở đây bằng cách sử dụng thuộc tính autocomplete.
Bạn đã nhập tên trước đây trong trình duyệt mà bạn đang sử dụng chưa? Trình duyệt có thể cho phép bạn điền lại thông tin 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ính năng tự động hoàn thành và tự động điền trong một mô-đun sau.
Kiểm tra mức độ hiểu biết
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