Найдите проблемы с формами с помощью Chrome DevTools

Команда Chrome DevTools разрабатывает дополнительные новые функции, которые помогут вам находить проблемы с формами и отлаживать автозаполнение.

Сэм Даттон

В Chrome Canary мы тестируем новые функции DevTools, которые призваны помочь разработчикам понять, как работает автозаполнение форм и почему оно иногда дает сбой:

  • Как функция автозаполнения браузера сопоставляет сохраненные значения с полями формы?
  • Какие критерии используются функцией автозаполнения для заполнения полей формы?
  • Какие поля не были заполнены при автозаполнении?
  • Почему поле формы не заполняется функцией автозаполнения?

В этой статье описываются новые функции Chrome DevTools, а также объясняется, как их протестировать и оставить отзыв.

Что такое автозаполнение?

Chrome помогает пользователям управлять адресом, платежной и регистрационной информацией, безопасно сохраняя наборы данных и предлагая заполнять поля форм без необходимости ввода текста пользователем. Это известно как автозаполнение.

Chrome предлагает сохранять данные автозаполнения при отправке формы. На мобильном устройстве:

Три снимка экрана Android: форма адреса в Chrome, Chrome Autofill предлагает сохранить адрес, затем показывает диалог для редактирования новой записи автозаполнения.

После этого Chrome предлагает автоматически заполнить формы сохраненными данными.

На мобильном устройстве:

На рабочем столе:

Chrome предлагает автозаполнение формы адреса на рабочем столе

Управлять данными автозаполнения можно в настройках Chrome.

На мобильном устройстве:

Настройки Chrome на Android: редактирование адреса

На рабочем столе:

Страница chrome://settings/addresses, на которой показаны два примера адресов

Вы также могли видеть, как Chrome предлагает предложения для полей ввода, которые не связаны с адресом, кредитной картой или данными входа. Помимо предложения автозаполнения для наборов структурированных данных, таких как адрес и платежные реквизиты, Chrome помогает пользователям избегать повторного ввода данных для отдельных полей формы, которые не могут быть обработаны автозаполнением. Если в форме есть поле с атрибутом имени, с которым Chrome уже сталкивался, Chrome может предложить значения, чтобы вам не пришлось вводить данные повторно.

Вот простой пример:

Chrome предлагает предложения для неструктурированных данных в одном поле формы

Chrome DevTools показывает, что поле формы здесь не имеет атрибутов, которые имеют значение для браузера. Вместо этого это просто атрибут name n300 .

Chrome DevTools отображает информацию о неструктурированных данных в форме, как показано в предыдущем примере: один ввод, который имеет только атрибуты type=text и name=n300.

Поле не соответствует значению в наборе структурированных данных, которое сделало бы его пригодным для автозаполнения Chrome, но Chrome все равно может помочь пользователю, если он встретит поле с таким именем в будущем.

Тестируйте новые функции автозаполнения Chrome DevTools

Chrome тестирует новые возможности панели DevTools Issues , которые помогут устранить неполадки автозаполнения.

Вы можете попробовать эти новые возможности в Chrome Canary. Проверить Настройки. Настройки > Эксперименты > Флажок. Выделяет нарушающий узел или атрибут в дереве DOM панели «Элементы» в DevTools и перезагружает DevTools при появлении соответствующего запроса.

Страница настроек Chrome DevTools, показывающая «Выделяет нарушающий узел ...»

Кроме того, вы можете запустить Chrome Canary из командной строки с флагом 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

Чтобы проверить наличие проблем, откройте панель «Проблемы» DevTools на странице с формой. Для начала можно использовать form-problems.glitch.me .

Chrome DevTools показывает проблему с атрибутом for элемента формы.

Как видите, эта форма — полный бардак! Здесь есть:

  • Поля ввода без атрибута id или name .
  • Элементы с повторяющимися идентификаторами.
  • <label> с атрибутом for , который не соответствует идентификатору элемента.
  • Поле с пустым атрибутом autocomplete .

Наведите указатель мыши на выделенный элемент в дереве DOM и нажмите «Просмотреть проблему» , чтобы узнать больше.

Расширенная проблема в Chrome DevTools: неправильное использование метки для атрибута.

Нажмите Violating node , чтобы просмотреть затронутые ресурсы для каждой проблемы. Эта форма имеет восемь меток с атрибутом for , который не соответствует id поля формы.

Используйте DevTools для улучшения доступности форм

DevTools также может выявлять проблемы доступности автозаполнения, например, поля формы, не имеющие атрибута aria-labelledby или связанного <label> .

Chrome DevTools Панель специальных возможностей, показывающая, что для элемента ввода в форме найдена метка.

В этом примере элемент <input> имеет соответствующую метку. Это означает, что вспомогательные устройства могут объявлять о назначении элемента. Однако в следующем примере не было найдено соответствующей метки или атрибута aria-labelledby .

Панель Chrome DevTools Специальные возможности, показывающая, что для элемента ввода в форме не найдено соответствующей метки или атрибута aria-labelledby.

Оставьте отзыв о новых функциях автозаполнения в DevTools

Используйте следующие варианты для обсуждения новых функций и изменений в посте или чего-либо еще, связанного с DevTools:

  • Отправьте нам предложение или отзыв через зонтичный баг на crbug.com .
  • Сообщить о проблеме в DevTools: Дополнительные параметры > Справка > Сообщить о проблеме в DevTools .
  • Твитните @ChromeDevTools .

Узнать больше

  • Learn Forms : курс по HTML-формам, который поможет вам улучшить свои навыки веб-разработчика. Идеально подходит для новичков в формах и автозаполнении.
  • web.dev/tags/forms : Руководство, передовой опыт и практические занятия по формам оплаты, входа в систему и адреса.