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ỏ về biểu mẫu khiến người dùng khó chịu và có thể khiến họ rời khỏi trang web của bạn hoặc bỏ ngang 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, hỗ trợ tiếp cận và hoạt động hiệu quả đối 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ó tiêu đề và nút riêng.

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 CHỈNH SỬA TRÊN CODEPEN để chỉnh sửa dự án.

  • Thêm một 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 đó có thể trông phức tạp và lặp đi lặp lại chỉ với một trường tên, nhưng nó đã làm được 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. Một lần nhấn hoặc nhấp vào nhãn sẽ di chuyển tiêu điểm đến đầ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 đầu vào riêng lẻ – điều này rất phù hợp với ngón tay, ngón cái và các lần 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 được lấy làm tiêu điểm.

Còn name="name" thì sao? Đây là tên (tình cờ là "name"!) được liên kết với dữ liệu từ đầu vào này. Dữ liệu này sẽ được gửi đến máy chủ khi biểu mẫu được gửi. Việc thêm một 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 ô 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à đ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 để 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 ô 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 là những giá trị cụ thể đã được dùng trước đây trong các thành phần đầu vào của biểu mẫu cũng có autocomplete="name". Trình duyệt không chỉ đoán xem nội dung nào có thể phù hợp: bạn có quyền kiểm soát. Bạn cũng sẽ thấy lựa chọn Quản lý… để xem và chỉnh sửa tên cũng như địa chỉ mà trình duyệt 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 đầu vào duy nhất, có và không có giá trị tự động hoàn thành. Một giá trị cho thấy giao diện người dùng của trình duyệt có các giá trị đề xuất theo kinh nghiệm; giá trị còn lại cho thấy giao diện người dùng khi có các giá trị tự động hoàn thành được lưu trữ.
Giao diện người dùng cho tính nă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 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 nội dung 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 các ký tự chữ cái Unicode, dấu gạch ngang và dấu chấm (dấu chấm câu). Điều đó có nghĩa là những tên như Françoise hoặc Jörg không được coi là "không hợp lệ". Điều này không xảy ra nếu bạn dùng giá trị \w. Giá trị này [chỉ cho phép dùng các ký tự trong bảng chữ cái Latinh.

  • required 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à 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ã nào khác!

Để 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 mà không nhập thông tin. Bạn sẽ thấy chức năng cảnh báo tích hợp của trình duyệt về trường bắt buộc trống và thiết lập tiêu điểm cho trường đó.

Bước 3: Thêm một trường địa chỉ linh hoạt vào biểu mẫu

Để thêm một 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ỉ 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ừ phi bạn thực sự cần. Đừng buộc người dùng phải cố gắng nhập địa chỉ của họ vào 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 và Quốc gia hoặc khu vực. Để đơn giản, chúng tôi chỉ đưa ra 5 quốc gia đầu tiên ở đây. Bạn có thể xem danh sách đầy đủ 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ỉ của 194 quốc gia, bao gồm cả địa chỉ mẫu.) Nhãn Quốc gia hoặc khu vực được 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 riêng lẻ (mặc dù 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ó tính năng cao, nhưng điều gì sẽ xảy ra 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? 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ó 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ột đầu vào 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 đầu vào duy nhất: khô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, đơn giản hoá quy trình xác thực và cho phép trình duyệt tự động điền.

Có 2 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 nhận đượ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à biểu mẫu hiện có thể được gửi (mặc định là next).
Hai ảnh chụp màn hình về 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 khoá enter.
Sử dụng thuộc tính enterkeyhint để đặt nhãn cho nút Enter: "tiếp theo" và "xong".

Biểu mẫu địa chỉ hoàn chỉnh của bạn hiện có dạng như sau:

  • Thử biểu mẫu của bạn 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?

Có một số cách để kiểm thử biểu mẫu trên nhiều thiết bị:

Tìm hiểu thêm

  • Phân tích và giám sát người dùng thực: cho phép kiểm tra và giám sát hiệu suất cũng như khả năng sử dụng của thiết kế biểu mẫu đối với người dùng thực và 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 rời khỏi biểu mẫu địa chỉ mà không hoàn tất là bao nhiê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à số liệu phân tích về hoạt động tương tác (người dùng tương tác với thành phần nào trên trang hay không?)

  • Người dùng của bạn ở đâu? Họ định dạng địa chỉ như thế nào? Họ dùng tên nào cho các thành phần địa chỉ, chẳng hạn như mã bưu chính hoặc mã bưu điện? Frank's Compulsive Guide to Postal Addresses (Hướng dẫn toàn diện 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 vì khả năng sử dụng kém. Tốt nhất là bạn nên tránh chọn các phần tử cho danh sách dài gồm nhiều 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 có thể cân nhắc một lựa chọn thay thế như trình 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 những danh sách có nhiều mục không? Bạn sẽ làm gì để đả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? (Phần tử <select> không hoạt động hiệu quả đối với số lượng lớn các mục, nhưng ít nhất thì phần tử này có thể dùng được 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ề sự phức tạp của việc chuẩn hoá một 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.