Làm cách nào để thiết kế một biểu mẫu phù hợp với nhiều định dạng tên và địa chỉ? Các lỗi nhỏ trên biểu mẫu 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 bỏ dở việc mua hàng hoặc đăng ký.
Lớp học lập trình này hướng dẫn bạn cách tạo 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à một nút. Sau đó, bạn sẽ bắt đầu thêm dữ liệu đầu vào. (CSS và một chút JavaScript đã được đưa vào.)
Nhấp vào Phối lại để chỉnh sửa để có thể chỉnh sửa dự án.
Thêm trường tên vào phần tử
<form>
bằng đoạn mã sau:
<section>
<label for="name">Name</label>
<input id="name" name="name">
</section>
Điều này có thể trông phức tạp và lặp lại đối với chỉ một trường tên, nhưng đã có rất nhiều trường hợp lặp lại.
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 của nhãn đó, tạo ra một mục tiêu lớn hơn nhiều so với dữ liệu đầu vào của chính nhãn đó. Điều này rất phù hợp với ngón tay, ngón cái và thao tác nhấp chuột! Trình đọc màn hình sẽ thông báo văn bản nhãn khi nhãn hoặc dữ liệu đầu vào của nhãn nhận được tiêu điểm.
Còn name="name"
thì sao? Đây là tên (đúng là "name"!) liên kết với dữ liệu từ dữ liệu đầu vào này đượ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 từ phần tử này.
Bước 2: Thêm 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 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 phù hợp với dữ liệu đầu vào này, dựa trên giá trị name
và id
.
Bây giờ, hãy thêm autocomplete="name"
vào mã đầu vào của bạn sao cho 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 nhập Tên. Bạn thấy sự khác biệt nào?
Bạn sẽ nhận thấy một thay đổi nhỏ: với autocomplete="name"
, các đề xuất hiện là các giá trị cụ thể từng được sử dụng trước đây trong các mục nhập biểu mẫu cũng có autocomplete="name"
. Trình duyệt không chỉ đoán những gì có thể phù hợp: bạn có quyền kiểm soát. Bạn cũng sẽ thấy tuỳ chọn Quản lý… để xem và chỉnh sửa tên và địa chỉ mà 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 quy tắc ràng buộc
maxlength
, pattern
và required
để mã đầu vào của bạn có dạ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 bất kỳ dữ liệu đầu vào nào 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. Đ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 đúng nếu bạn sử dụng giá trị\w
[chỉ cho phép các ký tự từ bảng chữ cái Latinh.required
có nghĩa là… bắt buộc! Trình duyệt sẽ không cho phép gửi biểu mẫu nếu không có dữ liệu cho trường này, đồng thời sẽ cảnh báo và làm nổi bật dữ liệu đầu vào nếu bạn cố gắng gửi biểu mẫu. Bạn không cần thêm mã!
Để kiểm thử cách hoạt động của biểu mẫu có và không có các thuộc tính này, hãy thử nhập dữ liệu:
- 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 với dữ liệu đầu vào trống. Bạn sẽ thấy cảnh báo chức năng trình duyệt tích hợp 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 của bạn:
<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à công cụ 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 và số nhà, trừ khi bạn thực sự cần. Đừng buộc người dùng phải cố gắng điều chỉnh địa chỉ của họ cho vừa với những trường không phù hợp.
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 đây 5 quốc gia đầu tiên. Danh sách đầy đủ có trong biểu mẫu địa chỉ đã hoàn tất.
<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 rằng 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.
(Global Sourcebook cung cấp thông tin về định dạng địa chỉ cho 194 quốc gia, bao gồm cả địa chỉ mẫu.) Nhãn Quốc gia hoặc khu vực được sử dụng thay cho 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à quốc gia đơn lẻ (mặc dù có giá trị autocomplete
).
Bước 4: Giú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ỉ có chức năng cao, nhưng nếu trang web của bạn yêu cầu nhiều địa chỉ cho việc vận chuyển và thanh toán thì sao? Hãy thử cập nhật biểu mẫu để cho phép khách hàng nhập địa chỉ giao hàng và địa chỉ thanh toán. Làm cách nào để nhập dữ liệu nhanh chóng và dễ dàng nhất, đặc biệt là 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 sẽ giải thích các kỹ thuật xử lý nhiều địa chỉ.
Dù 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 giá trị nhập: không chia số thành các 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, giúp quy trình xác thực đơ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 có được bàn phím phù hợp.enterkeyhint="done"
đặt nhãn phím enter trên bàn phím cho thiết bị di động để cho biết đây là trường cuối cùng và biểu mẫu hiện có thể được gửi (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:
- Dùng thử biểu mẫu của bạn trên các thiết bị khác nhau. Bạn đang nhắm đến những thiết bị và trình duyệt nào? Làm cách nào để cải thiện biểu mẫu này?
Có một số cách để kiểm thử biểu mẫu trên nhiều thiết bị:
- Sử dụng Chế độ thiết bị trong 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 đến điện thoại.
- 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.
Vươn xa hơn
Phân tích và theo dõi người dùng thực: cho phép kiểm thử và theo dõi hiệu suất cũng như khả năng hữu dụng của thiết kế biểu mẫu cho 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 (có bao nhiêu tỷ lệ người dùng thoát khỏi biểu mẫu địa chỉ của bạn mà không hoàn thành?) 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 với thành phần nào trên trang?)
Người dùng của bạn ở đâu? Họ định dạng địa chỉ như thế nào? Các đối tượng này sử dụng tên nào 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 về các định dạng địa chỉ ở hơn 200 quốc gia.
Bộ chọn quốc gia nổi tiếng là khó sử dụng. Tốt nhất là bạn nên tránh chọn các phần tử cho 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ì
<select>
, bạn nên cân nhắc một phương án thay thế như bộ chọn quốc gia của Viện Baymard.Bạn có thể thiết kế một bộ chọn tốt hơn cho các danh sách có nhiều mục không? Làm cách nào để đảm bảo thiết kế của bạn có thể truy cập được trên nhiều thiết bị và nền tảng? (Thành phần
<select>
không hoạt động tốt với một số lượng lớn mục, nhưng ít nhất bạn có thể sử dụng thành phần này trên hầu hết các trình duyệt và thiết bị hỗ trợ!)Bài đăng trên blog <input type="country" /> thảo luận về độ 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ó một công cụ để tải mã quốc gia và tên quốc gia xuống bằng nhiều ngôn ngữ, ở nhiều định dạng.