Việc điền địa chỉ có thể tốn thời gian và phiền toái. Dòng địa chỉ 2 là gì? Có thể bạn không có họ. Vậy bạn nên nhập gì vào trường Họ? Tránh những nhầm lẫn này và giúp người dùng điền vào biểu mẫu địa chỉ.
Đảm bảo biểu mẫu địa chỉ của bạn dễ sử dụng
Nhiều biểu mẫu sử dụng một trường cho tên và một trường cho họ.
Tuy nhiên, một số người không có họ hoặc tên của họ không có hai phần,
vậy nên làm thế nào để họ điền vào trường họ? Sử dụng một <input> duy nhất cho trường tên.
Tìm hiểu thêm về cách xử lý các định dạng tên khác nhau.
Ngoài ra, hãy sử dụng một <input> duy nhất cho địa chỉ đường phố – không phải địa chỉ nào cũng có số nhà.
Hãy cẩn thận với các nội dung mô tả kiểm soát biểu mẫu.
Ví dụ: người dùng ở Hoa Kỳ cho biết ZIP và mã bưu chính ở Vương quốc Anh.
Sử dụng <label for="zip">ZIP or postal code (optional)</label> để đảm bảo người dùng biết dữ liệu cần nhập.
Đặt trường mã bưu chính là không bắt buộc – không phải địa chỉ nào cũng có mã bưu chính.
Giúp người dùng nhập địa chỉ của họ
Thuộc tính autocomplete có thể giúp người dùng nhập lại địa chỉ:
autocomplete="name"autocomplete="street-address"autocomplete="postal-code"autocomplete="country"
Bạn có thể xác định nhiều giá trị được phân tách bằng dấu cách cho autocomplete.
Giả sử bạn có một biểu mẫu với địa chỉ giao hàng và một biểu mẫu khác cho địa chỉ thanh toán.
Để cho trình duyệt biết mã bưu chính của địa chỉ thanh toán,
bạn có thể sử dụng autocomplete="billing postal-code".
Đối với địa chỉ giao hàng, hãy sử dụng shipping làm giá trị đầu tiên.
Thay đổi nhãn cho phím Enter trên bàn phím ảo bằng thuộc tính enterkeyhint.
Sử dụng enterkeyhint="done" cho thành phần điều khiển biểu mẫu cuối cùng và enterkeyhint="next" cho các thành phần điều khiển biểu mẫu khác.