Làm cách nào để thiết kế một biểu mẫu hoạt động hiệu quả cho nhiều định dạng tên và địa chỉ? Dạng thức nhỏ sự cố gây khó chịu 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 mua hàng hoặc đăng ký.
Lớp học lập trình này cho bạn biết cách tạo một biểu mẫu dễ sử dụng, dễ truy cập và hoạt động hiệu quả cho 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 của riêng họ. Sau đó, bạn sẽ bắt đầu thêm thông tin đầu vào. (CSS và một chút JavaScript hiện đã có included.)
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 thuộc tính
name hoặc id của input. Khi bạn nhấn hoặc nhấp vào một nhãn, tiêu điểm sẽ di chuyển đến mục nhập của nhãn, làm cho tiêu điểm lớn hơn nhiều
nhắm mục tiêu hơn mục tiêu đầu vào – hiệu quả đối với ngón tay, ngón cái và nhấp chuột! Trình đọc màn hình
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 (tên gọi là 'tên'!) được liên kết với dữ liệu
từ thông tin đầu vào này, vốn được gửi đến máy chủ khi biểu mẫu được gửi. Đang bao gồ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 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 nhập Tên trong Chrome? Bạn sẽ thấy tính năng tự động điền
các đề xuất mà trình duyệt đã lưu trữ và suy đoán là phù hợp cho thông tin đầu vào này, vì
Các 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 ô nhập Tên. Bạn nhậ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", các đề xuất hiện đã trở nên cụ thể
các giá trị được dùng trước đó trong biểu mẫu đầu vào cũng có autocomplete="name". Trình duyệt
không chỉ là đoán xem những gì có thể phù hợp: bạn nắm quyền kiểm soát. Bạn cũng sẽ thấy nút Quản lý...
để xem và chỉnh sửa tên và địa chỉ được 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ã nhập 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 nhập bất kỳ nội dung nào dài hơn 100 ký tự.pattern="[\p{L} \-\.]+"sử dụng 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 hết). Đ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ệ". Không đúng như vậy 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.requirednghĩ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 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 thông tin đó. Không có mã bổ sung là bắt buộc!
Để kiểm tra cách biểu mẫu hoạt động với 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 không có thông tin đầu vào. Bạn sẽ thấy cảnh báo chức năng của trình duyệt được tích hợp sẵn trường bắt buộc trống và đặt trọng tâm vào đó.
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à 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ư số nhà và tên đường phố trừ phi bạn thực sự cần phải làm. Không buộc người dùng cố gắng nhập địa chỉ của họ vào các trường không có ý nghĩa.
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. Để đơn giản hoá, chỉ 5 quốc gia đầu tiên được đưa vào đâ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 rằng Mã bưu chính là không bắt buộc: lý do là vì nhiều quốc gia không sử dụng mã bưu chính.
(Global Sourcebook (Sách nguồn toàn cầu) cung cấp thông tin về
định dạng địa chỉ cho 194 quốc gia khác nhau, bao gồm cả địa chỉ mẫu). Nhãn Quốc gia hoặc
khu vực được sử dụng thay vì Quốc gia, bởi 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 cần nhiều hơn một biểu mẫu thì sao
địa chỉ giao hàng và thanh toán không? 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à đị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ó thể,
đặc biệt nếu hai địa chỉ này 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ù 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 thông tin đầu vào duy nhất: đừng chia số điện thoại thành nhiều phần. Từ đó, người dùng nhập dữ liệu hoặc sao chép và dán, giúp 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"giúp đả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 di động để cho biết đây là lần nhập gần đây nhất và 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:
- 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 mục tiêu đến những thiết bị và trình duyệt nào? Làm thế nào có thể biểu mẫu sẽ được cải thiện không?
Có một số cách để kiểm tra biểu mẫu của bạn 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 của bạn.
- Sử dụng một dịch vụ như BrowserStack để kiểm thử trên một phạm vi trên nhiều thiết bị và trình duyệt.
Tìm hiểu thêm
Analytics và hoạt động giám sát người dùng thực: giúp kiểm tra và giám sát hiệu suất và khả năng hữu dụng của kiểu thiết kế biểu mẫu đối với người dùng thực, và kiểm tra xem thay đổi có thành công hay không. Bạn nên theo dõi hiệu suất tải cũng như 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ỉ của bạn mà không hoàn tất không? người dùng dành bao nhiêu thời gian trên các trang biểu mẫu địa chỉ của bạn?) và phân tích tương tác (trang nào các thành phần mà người dùng có tương tác hay không?)
Người dùng của bạn sống ở đâu? Họ định dạng địa chỉ như thế nào? Địa chỉ dùng tên nào chẳng hạn như ZIP hoặc mã bưu chính? Hướng dẫn bắt buộc của Frank về địa chỉ bưu chính 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ả năng hữu dụng kém. Tốt nhất là bạn nên tránh sử dụng các phần tử chọn lọc cho một danh sách các mục dài 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 có thể 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? Bạn sẽ đảm bảo thiết kế của mình có thể truy cập trên nhiều thiết bị và nền tảng không? (Phần tử
<select>không hoạt động tốt đối với số lượng lớn mục, nhưng ít nhất cũng dùng được mục 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 sự phức tạp của việc chuẩn hoá bộ chọn quốc gia. Bản địa hoá tên quốc gia cũng có thể là có vấn đề. Danh sách quốc gia có công cụ giúp tải xuống mã quốc gia và tên bằng nhiều ngôn ngữ, ở nhiều định dạng.