Tìm vấn đề về biểu mẫu với Công cụ của Chrome cho nhà phát triển

Nhóm Chrome DevTools đang xây dựng thêm các tính năng mới để giúp bạn tìm thấy vấn đề về biểu mẫu và gỡ lỗi tính năng Tự động điền.

Trong Chrome Canary, chúng tôi đang thử nghiệm các tính năng mới trong DevTools nhằm giúp nhà phát triển hiểu cách hoạt động của tính năng Tự động điền biểu mẫu và lý do đôi khi tính năng này không hoạt động:

  • Tính năng Tự động điền của trình duyệt liên kết các giá trị đã lưu trữ với các trường biểu mẫu như thế nào?
  • Tính năng Tự động điền sử dụng tiêu chí nào để điền vào trường biểu mẫu?
  • Tính năng Tự động điền không điền vào những trường nào?
  • Tại sao tính năng Tự động điền không điền sẵn thông tin vào một trường biểu mẫu?

Bài viết này trình bày các tính năng mới trong Chrome DevTools, đồng thời giải thích cách bạn có thể kiểm thử các tính năng đó và đưa ra ý kiến phản hồi.

Tính năng Tự động điền là gì?

Chrome giúp người dùng quản lý địa chỉ, thông tin thanh toán và thông tin đăng nhập bằng cách lưu trữ an toàn các tập dữ liệu và đề xuất điền vào các trường biểu mẫu mà người dùng không cần nhập văn bản. Tính năng này được gọi là Tự động điền.

Chrome sẽ đề xuất lưu dữ liệu Tự động điền khi bạn gửi biểu mẫu. Trên thiết bị di động:

Ba ảnh chụp màn hình Android: một biểu mẫu địa chỉ trong Chrome, tính năng Tự động điền của Chrome đề nghị lưu địa chỉ, sau đó hiển thị hộp thoại để chỉnh sửa mục nhập Tự động điền mới.

Sau đó, Chrome sẽ đề xuất tự động điền vào biểu mẫu bằng dữ liệu đã lưu.

Trên thiết bị di động:

Trên máy tính:

Chrome đề nghị tự động điền biểu mẫu địa chỉ trên máy tính

Bạn có thể quản lý dữ liệu Tự động điền trong phần cài đặt của Chrome.

Trên thiết bị di động:

Chế độ cài đặt Chrome trên Android: chỉnh sửa địa chỉ

Trên máy tính:

Trang chrome://settings/addresses hiển thị hai địa chỉ mẫu

Bạn cũng có thể thấy Chrome đưa ra nội dung đề xuất cho các trường nhập không liên quan đến địa chỉ, thẻ tín dụng hoặc dữ liệu đăng nhập. Ngoài việc cung cấp tính năng Tự động điền cho nhóm dữ liệu có cấu trúc như địa chỉ và thông tin thanh toán, Chrome còn giúp người dùng tránh phải nhập lại dữ liệu cho một trường biểu mẫu mà tính năng Tự động điền không thể xử lý. Khi một biểu mẫu có trường có thuộc tính tên mà Chrome từng gặp, Chrome có thể đề xuất các giá trị để bạn không cần nhập lại dữ liệu.

Sau đây là một ví dụ đơn giản:

Chrome đưa ra các đề xuất cho dữ liệu không có cấu trúc trong một trường biểu mẫu

Công cụ cho nhà phát triển của Chrome cho thấy trường biểu mẫu ở đây không có thuộc tính có ý nghĩa đối với trình duyệt. Thay vào đó, đây chỉ là một thuộc tính name của n300.

Công cụ phát triển Chrome cho thấy thông tin về dữ liệu không có cấu trúc trong một biểu mẫu, như trong ví dụ trước: một mục nhập duy nhất chỉ có các thuộc tính type=text và name=n300.

Trường này không tương ứng với một giá trị trong tập hợp dữ liệu có cấu trúc phù hợp với tính năng Tự động điền của Chrome, nhưng Chrome vẫn có thể giúp người dùng nếu gặp trường có tên này trong tương lai.

Kiểm thử các tính năng Tự động điền mới trong Chrome DevTools

Chrome đang thử nghiệm các tính năng mới cho bảng điều khiển Vấn đề trong Công cụ cho nhà phát triển để giúp gỡ lỗi các sự cố liên quan đến tính năng Tự động điền.

Bạn có thể dùng thử các tính năng mới này trong Chrome Canary. Đánh dấu Cài đặt. Cài đặt > Thử nghiệm > Hộp đánh dấu. Đánh dấu một nút hoặc thuộc tính vi phạm trong cây DOM của bảng điều khiển Phần tử trong DevTools và tải lại DevTools khi được nhắc.

Trang cài đặt Công cụ của Chrome cho nhà phát triển, hiển thị thông báo "Đánh dấu một nút vi phạm ..."

Ngoài ra, bạn có thể chạy Chrome Canary qua dòng lệnh bằng cờ AutofillEnableDevtoolsIssues:

  • Windows: shell start chrome --restart --flag-switches-begin --enable-features=AutofillEnableDevtoolsIssues
  • Mac: shell open -a "Google Chrome Canary" --args --restart --flag-switches-begin --enable-features=AutofillEnableDevtoolsIssues

Để kiểm tra vấn đề, hãy mở bảng điều khiển Vấn đề trong DevTools trên một trang có biểu mẫu. Bạn có thể bắt đầu từ form-problems.glitch.me.

Công cụ của Chrome cho nhà phát triển cho thấy vấn đề về thuộc tính for của một phần tử biểu mẫu.

Như bạn có thể thấy, biểu mẫu này rất lộn xộn! Có:

  • Các trường nhập không có thuộc tính id hoặc name.
  • Các phần tử có mã nhận dạng trùng lặp.
  • <label> có thuộc tính for không khớp với mã phần tử.
  • Trường có thuộc tính autocomplete trống.

Di chuột qua một phần tử được đánh dấu trong cây DOM rồi nhấp vào Xem vấn đề để tìm hiểu thêm.

Mở rộng vấn đề trong Công cụ của Chrome cho nhà phát triển: Sử dụng không chính xác nhãn cho thuộc tính.

Nhấp vào Violating node (Điểm vi phạm) để xem các tài nguyên bị ảnh hưởng của từng vấn đề. Biểu mẫu này có 8 nhãn với thuộc tính for không khớp với id của trường biểu mẫu.

Sử dụng Công cụ cho nhà phát triển để cải thiện khả năng hỗ trợ tiếp cận của biểu mẫu

Công cụ cho nhà phát triển cũng có thể làm nổi bật các vấn đề về khả năng hỗ trợ tiếp cận của tính năng Tự động điền, chẳng hạn như trường biểu mẫu không có thuộc tính aria-labelledby hoặc <label> được liên kết.

Bảng điều khiển Hỗ trợ tiếp cận của Chrome DevTools cho biết đã tìm thấy nhãn cho một phần tử đầu vào trong biểu mẫu.

Trong ví dụ này, phần tử <input> có một nhãn phù hợp. Điều này có nghĩa là các thiết bị hỗ trợ có thể thông báo mục đích của phần tử. Tuy nhiên, trong ví dụ sau, không tìm thấy nhãn hoặc thuộc tính aria-labelledby trùng khớp.

Bảng điều khiển Hỗ trợ tiếp cận trong Công cụ dành cho nhà phát triển Chrome cho biết không tìm thấy nhãn hoặc thuộc tính aria-labelledby phù hợp cho phần tử nhập trong biểu mẫu.

Đưa ra ý kiến phản hồi về các tính năng Tự động điền mới trong Công cụ cho nhà phát triển

Hãy sử dụng các lựa chọn sau để thảo luận về các tính năng và thay đổi mới trong bài đăng hoặc bất kỳ nội dung nào khác liên quan đến DevTools:

  • Gửi đề xuất hoặc ý kiến phản hồi cho chúng tôi thông qua lỗi tổng hợp trên crbug.com.
  • Báo cáo sự cố trong Công cụ cho nhà phát triển: Tuỳ chọn khác > Trợ giúp > Báo cáo sự cố trong Công cụ cho nhà phát triển.
  • Gửi tweet đến @ChromeDevTools.

Tìm hiểu thêm

  • Tìm hiểu về biểu mẫu: Một khoá học về biểu mẫu HTML để giúp bạn cải thiện chuyên môn của mình với tư cách là nhà phát triển web. Phù hợp với những người mới sử dụng biểu mẫu và tính năng Tự động điền.
  • web.dev/tags/forms: Hướng dẫn, phương pháp hay nhất và lớp học lập trình về các biểu mẫu thanh toán, đăng nhập và địa chỉ.