Việc điền địa chỉ có thể tốn thời gian và gây khó chịu. Dòng địa chỉ 2 dùng để làm gì? Bạn có thể 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ỉ.
Tạo biểu mẫu thân thiện với người 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 họ nên điền thông tin gì vào trường họ? Sử dụng một <input> 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.
Theo nghiên cứu, Dòng địa chỉ 2 có thể khiến người dùng nhầm lẫn. Hãy cân nhắc sử dụng <textarea> cho toàn bộ địa chỉ hoặc ẩn trường Dòng địa chỉ 2 sau một <button> hiển thị.
Hãy cẩn thận với nội dung mô tả về chế độ kiểm soát biểu mẫu.
Ví dụ: người dùng ở Hoa Kỳ gọi là mã ZIP, ở Vương quốc Anh gọi là mã bưu chính.
Sử dụng <label for="zip">ZIP or postal code (optional)</label> để đảm bảo người dùng biết cần nhập dữ liệu nào.
Đặ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ỉ của họ:
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 chứa địa chỉ giao hàng và một biểu mẫu khác chứa địa chỉ thanh toán.
Để cho trình duyệt biết mã bưu chính nào là 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 khoá 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 kiểm soát biểu mẫu cuối cùng và enterkeyhint="next" cho các thành phần kiểm soát biểu mẫu khác.