Tạo một biểu mẫu giúp người dùng dễ dàng nhập dữ liệu địa chỉ trên máy tính và thiết bị di động. Đảm bảo biểu mẫu tận dụng tối đa các tính năng tích hợp sẵn của trình duyệt để tự động điền, xác thực và ràng buộc việc nhập dữ liệu.
Cách triển khai
Dưới đây là những nguyên tắc quan trọng nhất để xây dựng biểu mẫu địa chỉ hiệu quả.
Sử dụng HTML hợp lệ và có ý nghĩa
Khai thác tối đa các phần tử và thuộc tính được tạo để tạo biểu mẫu:
<form>,<input>,<label>và<button>type,autocompletevàinputmode
Các phần tử này cho phép chức năng tích hợp sẵn của trình duyệt, cải thiện khả năng hỗ trợ tiếp cận và thêm ý nghĩa cho mã đánh dấu.
Sử dụng phần tử <label> để gắn nhãn các trường biểu mẫu cho mục nhập dữ liệu
Để gắn nhãn cho <input>, <select> hoặc <textarea>, hãy sử dụng <label>. Liên kết nhãn với dữ liệu đầu vào bằng cách gán cho thuộc tính for của nhãn cùng giá trị với id của dữ liệu đầu vào.
Khai thác tối đa các thuộc tính HTML
Giúp người dùng dễ dàng nhập dữ liệu bằng cách sử dụng thuộc tính <type> của phần tử <input> thích hợp để cung cấp bàn phím phù hợp trên thiết bị di động và bật tính năng xác thực cơ bản tích hợp sẵn của trình duyệt.
Luôn sử dụng type="email" cho địa chỉ email và type="tel" cho số điện thoại.
<!-- type="email"/"tel" gives mobile users the right keyboard and enables built-in validation -->
<input type="email" id="email" name="email" autocomplete="email" required>
<input type="tel" id="phone" name="phone" autocomplete="tel">
Mỗi phần tử <input>, <select> và <textarea> NÊN có một thuộc tính autocomplete thích hợp để cải thiện khả năng hỗ trợ tiếp cận và giúp người dùng tránh phải nhập lại dữ liệu.
Tạo nút hữu ích
Sử dụng <button> cho các nút. Bạn cũng có thể sử dụng <input type="submit">, nhưng không được sử dụng div hoặc một số phần tử ngẫu nhiên khác làm nút. Các phần tử nút cung cấp hành vi dễ tiếp cận, chức năng gửi biểu mẫu tích hợp sẵn và có thể dễ dàng tạo kiểu.
Đặt cho mỗi nút gửi biểu mẫu một giá trị cho biết chức năng của nút đó. Đối với mỗi bước thanh toán, hãy sử dụng lời kêu gọi hành động mang tính mô tả để cho biết tiến trình và giúp người dùng dễ dàng nhận ra bước tiếp theo. Ví dụ: gắn nhãn nút gửi trên biểu mẫu địa chỉ giao hàng là Tiến hành thanh toán thay vì Tiếp tục hoặc Lưu.
Sử dụng một trường nhập tên duy nhất nếu có thể
Cho phép người dùng nhập tên của họ bằng một mục nhập duy nhất, trừ phi bạn có lý do chính đáng để lưu trữ riêng tên, họ, danh xưng hoặc các phần tên khác. Việc sử dụng một trường nhập tên duy nhất giúp biểu mẫu bớt phức tạp hơn, cho phép cắt và dán, đồng thời giúp tính năng tự động điền trở nên đơn giản hơn.
Cho phép tên quốc tế. Để xác thực, hãy tránh sử dụng biểu thức chính quy chỉ khớp với các ký tự Latinh. Chỉ dùng chữ cái Latinh: loại trừ những người dùng có tên hoặc địa chỉ chứa các ký tự không thuộc bảng chữ cái Latinh. Thay vào đó, hãy cho phép so khớp chữ cái Unicode và đảm bảo phần phụ trợ của bạn hỗ trợ Unicode một cách an toàn cho cả dữ liệu đầu vào và đầu ra. Unicode trong biểu thức chính quy được các trình duyệt hiện đại hỗ trợ tốt.
Cho phép nhiều định dạng địa chỉ
Khi tạo biểu mẫu địa chỉ, hãy lưu ý đến nhiều định dạng địa chỉ, ngay cả trong một quốc gia. Đừng đưa ra giả định về địa chỉ "bình thường".
Sử dụng một phần tử <textarea> duy nhất cho địa chỉ đường phố nếu có thể.
<!-- textarea handles multi-line international address formats that split inputs can't accommodate -->
<textarea id="address" name="address" autocomplete="street-address" required></textarea>
Đây là lựa chọn linh hoạt nhất cho nhiều định dạng địa chỉ trong nước và quốc tế.
Nếu mô hình dữ liệu của bạn cần các dòng địa chỉ riêng biệt, hãy sử dụng một <input> cho mỗi dòng có mã thông báo address-line1, address-line2 (và address-line3 nếu cần) autocomplete để tính năng tự động điền vẫn hoạt động. Đừng tách địa chỉ đường phố thành nhiều trường nhập không có các mã thông báo này và chỉ đặt dòng đầu tiên là bắt buộc.
<!-- Alternative: one input per line, each with its own autocomplete token -->
<input type="text" id="address-line1" name="address-line1" autocomplete="address-line1" required>
<input type="text" id="address-line2" name="address-line2" autocomplete="address-line2">
Giúp người dùng tránh vô tình bỏ sót các trường dữ liệu
Thêm thuộc tính required vào các trường bắt buộc.
<input type="text" id="city" name="city" autocomplete="address-level2" required>
Chiến lược dự phòng
Tính năng tự động điền là một tính năng cải tiến tăng dần. Trong những trình duyệt không hỗ trợ tính năng tự động điền, người dùng chỉ cần nhập thông tin địa chỉ theo cách thủ công. Các quy tắc ràng buộc về ngữ nghĩa HTML (chẳng hạn như type, inputmode và required) vẫn sẽ hoạt động đúng cách dưới dạng quy trình xác thực biểu mẫu chuẩn.