Sau khi tìm hiểu về thành phần 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 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ỉ nhiều lần trên mọi trang web mà bạn muốn mua hàng đều 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 ích cho 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 của bạn sẽ cung cấp cho bạn lựa 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 luôn chọn địa chỉ cũ làm lựa chọ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 để địa chỉ luôn được cập nhật.
Tính năng tự động điền hoạt động như thế nào trong trình duyệt?
Một trường địa chỉ có thể trông rất khác trên các trang web khác nhau. Làm thế nào trình duyệt biết đó là trường địa chỉ?
Trình duyệt sử dụng thông tin phỏng đoán để xác định một 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 trong bảng đ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 vào một trường có cùng loại dữ liệu đã nhập trước đó. Các trình duyệt thậm chí có thể đề xuất tính năng tự động điền toàn bộ biểu mẫu.
Trợ giúp trình duyệt bằng tính năng tự động điền
Hãy xem những việc bạn có thể làm để giúp các trình duyệt cung cấp đúng tuỳ chọn tự động điền.
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 xét các thuộc tính của một 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 nào để người dùng nhập địa chỉ email của họ 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
Một số ví dụ khác vẫn có thể khiến trình duyệt khó xác định loại dữ liệu nếu chỉ dựa vào 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ình đang 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 thông tin 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ô-đun sau.
Kiểm tra kiến thức
Kiểm tra kiến thức 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