Làm cách nào để thiết kế một biểu mẫu phù hợp với nhiều tên và định dạng địa chỉ? Sự cố dạng nhỏ sẽ gây khó chịu cho người dùng và có thể khiến họ rời khỏi trang web của bạn hoặc từ bỏ việc hoàn tất giao dịch mua hàng hay đăng ký.
Lớp học lập trình này cho bạn biết cách xây dựng một biểu mẫu dễ sử dụng, dễ tiếp cận và phù hợp với hầu hết người dùng.
Bước 1: Tận dụng tối đa các phần tử và thuộc tính HTML
Bạn sẽ bắt đầu phần này của lớp học lập trình bằng một biểu mẫu trống, chỉ có tiêu đề và nút. Sau đó, bạn sẽ bắt đầu thêm dữ liệu đầu vào. (Đã bao gồm CSS và một chút JavaScript.)
Nhấp vào Remix để chỉnh sửa (Remix) để chỉnh sửa dự án.
Thêm một trường tên vào phần tử
<form>kèm theo mã sau:
<section>
<label for="name">Name</label>
<input id="name" name="name">
</section>
Điều này có vẻ phức tạp và lặp lại đối với chỉ một trường tên, nhưng nó đã diễn ra rất nhiều.
Bạn đã liên kết label với input bằng cách so khớp thuộc tính for của label với name hoặc id của input. Thao tác nhấn hoặc nhấp vào một nhãn sẽ di chuyển tiêu điểm đến dữ liệu đầu vào, làm cho mục tiêu lớn hơn nhiều so với đầu vào đó. Điều này phù hợp với ngón tay, ngón cái và lượt nhấp chuột! Trình đọc màn hình sẽ thông báo văn bản của nhãn khi nhãn hoặc dữ liệu đầu vào của nhãn được lấy tiêu điểm.
Còn name="name" thì sao? Đây là tên (thường là "name") được liên kết với dữ liệu từ dữ liệu đầu vào này và được gửi đến máy chủ khi biểu mẫu được gửi. Việc thêm thuộc tính name cũng có nghĩa là FormData API có thể truy cập vào dữ liệu của phần tử này.
Bước 2: Thêm các thuộc tính để giúp người dùng nhập dữ liệu
Điều gì xảy ra khi bạn nhấn hoặc nhấp vào trường nhập Tên trong Chrome? Bạn sẽ thấy các đề xuất tự động điền mà trình duyệt đã lưu trữ và dự đoán là phù hợp với dữ liệu đầu vào này, dựa trên các giá trị name và id.
Bây giờ, hãy thêm autocomplete="name" vào mã đầu vào để có dạng như sau:
<section>
<label for="name">Name</label>
<input id="name" name="name" autocomplete="name">
</section>
Tải lại trang trong Chrome rồi nhấn hoặc nhấp vào trường Tên. Bạn thấy những điểm khác biệt nào?
Bạn sẽ nhận thấy một thay đổi nhỏ: với autocomplete="name", đề xuất hiện là các giá trị cụ thể đã được sử dụng trước đây trong dữ liệu đầu vào biểu mẫu cũng có autocomplete="name". Trình duyệt
không chỉ đoán nội dung phù hợp: bạn có quyền kiểm soát. Bạn cũng sẽ thấy tuỳ chọn Manage... (Quản lý...) để xem và chỉnh sửa tên và địa chỉ do trình duyệt của bạn lưu trữ.
Bây giờ, hãy thêm các thuộc tính xác thực ràng buộc
maxlength, pattern và required để mã đầu vào của bạn trông giống như sau:
<section>
<label for="name">Name</label>
<input id="name" name="name" autocomplete="name"
maxlength="100" pattern="[\p{L} \-\.]+" required>
</section>
maxlength="100"có nghĩa là trình duyệt sẽ không cho phép dữ liệu nhập dài hơn 100 ký tự.pattern="[\p{L} \-\.]+"sử dụng một biểu thức chính quy cho phép ký tự chữ cái Unicode, dấu gạch nối và dấu chấm (dấu chấm). Điều đó có nghĩa là những tên như Françoise hoặc Jörg không được phân loại là "không hợp lệ". Điều này không xảy ra nếu bạn sử dụng giá trị\w[chỉ cho phép các ký tự trong bảng chữ cái Latinh.requiredcó nghĩa là... bắt buộc! Trình duyệt sẽ không cho phép gửi biểu mẫu mà không có dữ liệu cho trường này, đồng thời sẽ cảnh báo và đánh dấu thông tin đầu vào nếu bạn cố gắng gửi. Không cần thêm mã!
Để kiểm tra cách biểu mẫu hoạt động khi có và không có các thuộc tính này, hãy thử nhập dữ liệu:
- Hãy thử nhập các giá trị không phù hợp với thuộc tính
pattern. - Hãy thử gửi biểu mẫu chưa điền thông tin. Bạn sẽ thấy cảnh báo chức năng trình duyệt tích hợp sẵn về trường bắt buộc trống và đặt tiêu điểm vào trường đó.
Bước 3: Thêm trường địa chỉ linh hoạt vào biểu mẫu
Để thêm trường địa chỉ, hãy thêm mã sau vào biểu mẫu:
<section>
<label for="address">Address</label>
<textarea id="address" name="address" autocomplete="address"
maxlength="300" required></textarea>
</section>
textarea là cách linh hoạt nhất để người dùng nhập địa chỉ của họ, và đây là lựa chọn tuyệt vời để cắt và dán.
Bạn nên tránh chia biểu mẫu địa chỉ thành các thành phần như tên đường phố và số nhà, trừ phi thực sự cần thiết. Đừng buộc người dùng cố gắng đưa địa chỉ của họ vào những trường không hợp lý.
Bây giờ, hãy thêm các trường cho Mã ZIP hoặc mã bưu chính và Quốc gia hoặc khu vực. Để cho đơn giản, chúng tôi chỉ đưa vào 5 quốc gia đầu tiên ở đây. Danh sách đầy đủ được bao gồm trong biểu mẫu địa chỉ đầy đủ.
<section>
<label for="postal-code">ZIP or postal code (optional)</label>
<input id="postal-code" name="postal-code"
autocomplete="postal-code" maxlength="20">
</section>
<section id="country-region">
<label for="">Country or region</label>
<select id="country" name="country" autocomplete="country"
required>
<option selected value="SPACER"> </option>
<option value="AF">Afghanistan</option>
<option value="AX">Åland Islands</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="AS">American Samoa</option>
</select>
</section>
Bạn sẽ thấy mục Mã bưu chính là không bắt buộc, đó là vì nhiều quốc gia không sử dụng mã bưu chính.
(Sách nguồn toàn cầu cung cấp thông tin về các định dạng địa chỉ cho 194 quốc gia, bao gồm cả địa chỉ mẫu.) Nhãn Country orregion (Quốc gia hoặc khu vực) được sử dụng thay cho Country (Quốc gia), vì một số lựa chọn trong danh sách đầy đủ (chẳng hạn như Vương quốc Anh) không phải là một quốc gia (mặc dù có giá trị autocomplete).
Bước 4: Cho phép khách hàng dễ dàng nhập địa chỉ giao hàng và địa chỉ thanh toán
Bạn đã tạo một biểu mẫu địa chỉ chức năng cao, nhưng nếu trang web của bạn yêu cầu nhiều địa chỉ, chẳng hạn như để giao hàng và thanh toán thì sao? Hãy thử cập nhật biểu mẫu của bạn để cho phép khách hàng nhập
địa chỉ giao hàng và thanh toán. Làm cách nào để bạn có thể nhập dữ liệu nhanh chóng và dễ dàng nhất có thể, đặc biệt nếu hai địa chỉ giống nhau? Bài viết đi kèm với lớp học lập trình này giải thích các kỹ thuật xử lý nhiều địa chỉ.
Dù bạn làm gì, hãy nhớ sử dụng đúng giá trị autocomplete!
Bước 5: Thêm trường số điện thoại
Để thêm mục nhập số điện thoại, hãy thêm mã sau vào biểu mẫu:
<section>
<label for="tel">Telephone</label>
<input id="tel" name="tel" autocomplete="tel" type="tel"
maxlength="30" pattern="[\d \-\+]+" enterkeyhint="done"
required>
</section>
Đối với số điện thoại, hãy sử dụng một dữ liệu đầu vào duy nhất: đừng chia số điện thoại thành nhiều phần. Điều này giúp người dùng dễ dàng nhập dữ liệu hoặc sao chép và dán, cũng như việc xác thực trở nên đơn giản hơn và cho phép trình duyệt tự động điền.
Có hai thuộc tính có thể cải thiện trải nghiệm người dùng khi nhập số điện thoại:
type="tel"đảm bảo người dùng thiết bị di động sẽ nhận được bàn phím phù hợp.enterkeyhint="done"đặt nhãn phím Enter cho thiết bị di động để cho biết đây là trường cuối cùng và bạn hiện có thể gửi biểu mẫu (mặc định lànext).
Bây giờ, biểu mẫu địa chỉ hoàn chỉnh của bạn sẽ có dạng như sau:
- Thử biểu mẫu trên nhiều thiết bị. Bạn đang nhắm mục tiêu đến những thiết bị và trình duyệt nào? Có thể cải thiện biểu mẫu này như thế nào?
Có một số cách để kiểm tra biểu mẫu trên nhiều thiết bị:
- Sử dụng Chế độ thiết bị công cụ của Chrome cho nhà phát triển để mô phỏng thiết bị di động.
- Gửi URL từ máy tính sang điện thoại của bạn.
- Hãy sử dụng một dịch vụ như BrowserStack để kiểm thử trên nhiều thiết bị và trình duyệt.
Tìm hiểu thêm
Giám sát người dùng thực và phân tích: cho phép kiểm thử và giám sát hiệu suất và khả năng hữu dụng của thiết kế biểu mẫu đối với người dùng thực, đồng thời kiểm tra xem các thay đổi có thành công hay không. Bạn nên theo dõi hiệu suất tải và các Chỉ số quan trọng về trang web khác, cũng như số liệu phân tích trang (tỷ lệ người dùng thoát khỏi biểu mẫu địa chỉ mà không hoàn tất biểu mẫu? Người dùng dành bao nhiêu thời gian trên các trang biểu mẫu địa chỉ?) và phân tích tương tác (người dùng tương tác hoặc không tương tác với thành phần trang nào?)
Người dùng của bạn sống ở đâu? Họ định dạng địa chỉ của mình như thế nào? Họ sử dụng tên gì cho các thành phần địa chỉ, chẳng hạn như ZIP hoặc mã bưu chính? Hướng dẫn bắt buộc về địa chỉ bưu chính của Frank cung cấp các đường liên kết hữu ích và hướng dẫn chi tiết nêu chi tiết định dạng địa chỉ ở hơn 200 quốc gia.
Bộ chọn quốc gia nổi tiếng với khả năng hữu dụng kém. Bạn nên tránh chọn các phần tử trong một danh sách dài các mục và tiêu chuẩn mã quốc gia ISO 3166 hiện liệt kê 249 quốc gia! Thay vì dùng
<select>, bạn có thể cân nhắc một giải pháp thay thế, chẳng hạn như bộ chọn quốc gia của Học viện Baymard.Bạn có thể thiết kế bộ chọn tốt hơn cho danh sách có nhiều mục không? Bạn sẽ đảm bảo thiết kế của mình có thể truy cập được trên nhiều thiết bị và nền tảng bằng cách nào? (Phần tử
<select>không hoạt động tốt với số lượng lớn mục, nhưng ít nhất thì phần tử này cũng hữu dụng trên hầu hết mọi trình duyệt và thiết bị hỗ trợ!)Bài đăng trên blog <input type="country" /> thảo luận về sự phức tạp của việc chuẩn hoá bộ chọn quốc gia. Việc bản địa hoá tên quốc gia cũng có thể gây ra vấn đề. Danh sách quốc gia có công cụ để tải mã và tên quốc gia xuống theo nhiều ngôn ngữ, ở nhiều định dạng.