Lớp học lập trình về các phương pháp hay nhất về biểu mẫu địa chỉ

Sam Dutton

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 hoàn tất giao dịch 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: Khai thác 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ó một 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 Remix to Edit (Trộn 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 mã sau:

<section>
  <label for="name">Name</label>
  <input id="name" name="name">
</section>

Điều đó có vẻ phức tạp và lặp lại chỉ với một trường tên, nhưng nó đã làm được rất nhiều việc.

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ì sẽ 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 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 để mã 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ữ.

Hai ảnh chụp màn hình Chrome trên điện thoại Android cho thấy một biểu mẫu có một mục nhập, có và không có giá trị tự động hoàn thành. Một màn hình hiển thị giao diện người dùng trình duyệt gợi ý giá trị theo phương pháp phỏng đoán; màn hình còn lại hiển thị giao diện người dùng khi có các giá trị tự động điền được lưu trữ.
Giao diện người dùng để tự động điền bằng các giá trị được đoán, so với tính năng tự động hoàn thành.

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:

<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à rất phù hợp để 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ã bưu chính hoặc mã zip và Quốc gia hoặc khu vực. Để đơn giản, chỉ có 5 quốc gia đầu tiên được đưa vào đây. 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à thông tin 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 vì 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 duy nhất (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ỉ có 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ư địa chỉ giao hàng và địa chỉ 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 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 di động để cho biết đây là trường cuối cùng và bạn có thể gửi biểu mẫu (mặc định là next).
Hai ảnh chụp màn hình của một biểu mẫu trên Android cho thấy cách thuộc tính đầu vào enterkeyhint thay đổi biểu tượng nút enter key (phím enter).
Sử dụng thuộc tính enterkeyhint để đặt nhãn nút Enter: "next" (tiếp theo) và "done" (xong).

Bây giờ, biểu mẫu địa chỉ hoàn chỉnh của bạn sẽ có dạng như sau:

  • Thử nghiệm biểu mẫu trên nhiều thiết bị. 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ị:

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 (tỷ lệ phần trăm 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 lâu trên các trang biểu mẫu địa chỉ của bạn?) và số liệu 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 hoặc không tương tác với thành phần nào?)

  • Người dùng của bạn ở đâu? Họ định dạng địa chỉ như thế nào? Chúng sử dụng tên nào cho các thành phần địa chỉ, chẳng hạn như mã ZIP hoặc mã bưu chính? Frank's Compulsive Guide to Postal Addresses (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ề đị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à 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ế 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ã và tên quốc gia xuống bằng nhiều ngôn ngữ, ở nhiều định dạng.