Автозаполнение форм на сайте

Автозаполнение в Яндекс Браузере позволяет посетителю быстро и безопасно ввести в форму номера банковских карт, пароли и другие личные данные (например, контакты). Это может облегчить оформление заказов и увеличить их количество. Исследования и эксперименты Яндекса с улучшением автозаполнения на формах оформления заказов показали, что конверсия заказов на сайтах, где эта функция работает корректно, возрастает на 5-10%.

Подробнее см. Автозаполнение форм.

Чтобы проверить корректность автозаполнения на сайте:

Шаг 1. Заполните профиль в Яндекс Браузере

1. Установите Яндекс Браузер.
2. Нажмите  → Пароли и карты или откройте страницу browser://personal/contacts.
3. Откройте Личные данные.
4. Нажмите Добавить и заполните форму.
5. Чтобы добавить в форму другие поля, нажмите Добавить поле.
6. Нажмите Сохранить.

Если формы на сайте имеют поля Пароли и Банковские карты, внесите и эти данные.

Шаг 2. Проверьте правильность автозаполнения формы

Нажмите на все поля формы на вашем сайте и проверьте, правильно ли отражаются всплывающие подсказки.

Шаг 3. Внесите необходимые правки

Если подсказок нет или они неправильные, проверьте разметку формы на соответствие рекомендациям, которые приведены ниже.

Рекомендации по разметке

Убедитесь, что:

• Разметка формы соответствует стандартам HTML.

• Элемент ввода имеет атрибут autocomplete с валидным значением.

  Например:

  Поле ввода имени

  <input placeholder="Имя" autocomplete="given-name">
  

  Поле ввода электронной почты

  <input autocomplete="email">
  

  Подробнее см. HTML Living Standard и MDN.

• Элементы ввода данных являются дочерними элементами тега form. Подробнее см. Отправка форм.

• Элементы ввода данных имеют интуитивно понятные атрибуты, например:

  Атрибут	Тип поля	Возможные варианты наименования
  id	Имя	first_name, name_first, fname, firstname, given_name, givenname
  name	Телефон	phone, phoneCity, telephone, tel
  placeholder	Организация	org, organization, company

  Пример понятного для автозаполнения кода

  <form action="">
    <input id="first_name">
    <input id="last_name">
    <input name="email">
    <textarea placeholder="Введите адрес"></textarea>
  </form>
  

  Пример некорректного кода

  <form>
    <!-- Браузер распознает поле как неизвестное. -->
    <input id="xdia_13">
    <!-- Браузер распознает поле как адрес, потому что поле подпадает под определения и адреса, и электронной почты. -->
    <input name="адрес почты">
    <!-- Неоднозначное назначение, которое, например, может распознаваться как электронная почта, адрес доставки, URL сайта. -->
    <textarea placeholder="Адрес"></textarea> 
  </form>
  

• Значение атрибута for у тега label однозначно ссылается на элемент ввода, для которого он предназначен.

  Пример понятного для автозаполнения тега label

  <form>
    <div id="customer">
      <label for="fname">Имя</label>
      <input type="text" id="fname">
      ...
    </div>
  </form>
  

  Пример некорректного кода

  <form>
    <div id="customer">
      <label for="">Имя</label>
      <div name="klw21">
        <div name="md-12">
          <input type="text">
        </div>
      </div>
      ...
    </div>
  </form>
  

Отправка форм

Большую часть вводимых пользователем данных браузер распознает в процессе отправки формы. Когда у формы на сайте нет тега form и нет явного события submit для отправки формы, сохраненные в браузере данные и, соответственно, автозаполнение могут работать неправильно.

Для распознавания отправки применяется несколько механизмов. Самый простой — обработка JavaScript-события submit. Помимо него существуют эвристики, которые анализируют заполнение полей формы, сохраняют введенные данные и реагируют на:

• навигацию на сайте;
• AJAX-запросы;
• удаление iframe, внутри которого заполнялась форма;
• удаление или скрытие заполненных элементов.

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

Чтобы браузер сохранил введенные данные и пользователь при последующем посещении сайта смог одним кликом заполнить форму, важно правильно подготовить форму отправки: использовать тег form и внутри него определять input type="submit".

<form>
  <input type="text">
  <input type="text">
  <input type="submit">
</form>

<div>
  <input type="text">
  <input type="text">
  <input type="submit">
</div>

<div>
  <input type="text">
  <input type="text">
  <div>Button</div>
</div>

Как отключить автозаполнение на сайте

Если вы хотите отключить автозаполнение только из-за некорректной работы, свяжитесь с командой Яндекс Браузера по адресу browser-autofill@support.yandex.ru. Специалисты помогут настроить автозаполнение. Если же отключение имеет другие причины, то можно попробовать следующее нестандартное решение:

Команда Яндекс Браузера не может гарантировать, что этот способ работает в любой среде. Чтобы проверить, удалось ли вам отключить автозаполнение, нажмите на поля формы и убедитесь, что подсказок нет.