---
metadata:
  - name: generator
    content: Diplodoc Platform v5.54.2
alternate:
  - https://yandex.uz/support/webmaster/ru/for-webmasters/autofill.md
  - href: ru/for-webmasters/autofill.md
    type: text/markdown
    title: Markdown version
  - href: ../llms.txt
    type: text/markdown
    title: llms.txt
---
> **Documentation Index:** Fetch the complete configuration index at https://yandex.uz/support/webmaster/ru/llms.txt



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

Автозаполнение в Яндекс Браузере позволяет посетителю быстро и безопасно ввести в форму [номера банковских карт](https://yandex.uz/support/browser/security/card-protection.html), [пароли](https://yandex.uz/support/browser/security/passwords-management.html) и другие личные данные (например, контакты). Это может облегчить оформление заказов и увеличить их количество. Исследования и эксперименты Яндекса с улучшением автозаполнения на формах оформления заказов показали, что конверсия заказов на сайтах, где эта функция работает корректно, возрастает на 5-10%.

Подробнее см. [Автозаполнение форм](https://browser.yandex.ru/help/personal-data-protection/autofill.html).


{% note info %}

Если автозаполнение не работает в Яндекс Браузере, скорее всего, оно не будет работать и в других браузерах.

{% endnote %}


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

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

1. [Установите Яндекс Браузер](https://yandex.uz/support/browser/about/install.html).
1. Нажмите **![](../_assets/autofill.png)** → **Пароли и карты** или откройте страницу `browser://personal/contacts`.
1. Откройте **Личные данные**.
1. Нажмите **Добавить** и заполните форму.
1. Чтобы добавить в форму другие поля, нажмите **Добавить поле**.
1. Нажмите **Сохранить**.

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

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

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

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

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

## Рекомендации по разметке {#recommend}

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

- Разметка формы [соответствует стандартам HTML](https://html.spec.whatwg.org/).
- Элемент ввода имеет атрибут `autocomplete` с валидным значением.

    Например:
    
    {% cut "Поле ввода имени " %}
    
    ```html
    <input placeholder="Имя" autocomplete="given-name">
    ```
    
    {% endcut %}
    
    {% cut "Поле ввода электронной почты" %}
    
    ```html
    <input autocomplete="email">
    ```
    
    {% endcut %}
    
    Подробнее см. [HTML Living Standard](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofilling-form-controls:-the-autocomplete-attribute) и [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values).
    
- Элементы ввода данных являются дочерними элементами тега `form`. Подробнее см. [Отправка форм](#submit).
- Элементы ввода данных имеют интуитивно понятные атрибуты, например:
    
    #|
    ||
    **Атрибут**
    |
    **Тип поля**
    |
    **Возможные варианты наименования**
    ||
    ||
    `id`
    |
    Имя
    |
    `first_name`, `name_first`, `fname`, `firstname`, `given_name`, `givenname`
    ||
    ||
    `name`
    |
    Телефон
    |
    `phone`, `phoneCity`, `telephone`, `tel`
    ||
    ||
    `placeholder`
    |
    Организация
    |
    `org`, `organization`, `company`
    ||
    |#
    
    {% cut "Пример понятного для автозаполнения кода" %}
    
    ```html
    <form action="">
      <input id="first_name">
      <input id="last_name">
      <input name="email">
      <textarea placeholder="Введите адрес"></textarea>
    </form>
    ```
    
    {% endcut %}
    
    {% cut "Пример некорректного кода" %}
    
    ```html
    <form>
      <!-- Браузер распознает поле как неизвестное. -->
      <input id="xdia_13">
      <!-- Браузер распознает поле как адрес, потому что поле подпадает под определения и адреса, и электронной почты. -->
      <input name="адрес почты">
      <!-- Неоднозначное назначение, которое, например, может распознаваться как электронная почта, адрес доставки, URL сайта. -->
      <textarea placeholder="Адрес"></textarea> 
    </form>
    ```
    
    {% endcut %}
    
- Значение атрибута `for` у тега `label` однозначно ссылается на элемент ввода, для которого он предназначен.
    
    {% cut "Пример понятного для автозаполнения тега label" %}
    
    ```html
    <form>
      <div id="customer">
        <label for="fname">Имя</label>
        <input type="text" id="fname">
        ...
      </div>
    </form>
    ```
    
    {% endcut %}
    
    {% cut "Пример некорректного кода" %}
    
    ```html
    <form>
      <div id="customer">
        <label for="">Имя</label>
        <div name="klw21">
          <div name="md-12">
            <input type="text">
          </div>
        </div>
        ...
      </div>
    </form>
    ```
    
    {% endcut %}
    

## Отправка форм {#submit}

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

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

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

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

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


{% cut "Пример простой и понятной формы отправки" %}


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


{% endcut %}

{% cut "Пример сложной, но понятной формы отправки" %}


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


{% endcut %}

{% cut "Пример непонятной браузеру формы отправки" %}


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


{% endcut %}


## Как отключить автозаполнение на сайте {#how-to-off}

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


{% cut "autocomplete="none" " %}


Любое недопустимое значение атрибута `autocomplete` является для браузера сигналом, что автозаполнение следует отключить. Кроме `none` можно использовать значения `nope`, `all-off`, `smth` или любой другой произвольный набор букв.


{% endcut %}


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


<div class="cut-button">

{% cut "Связаться с командой Яндекс Браузера" %}

Если у вас остались вопросы, свяжитесь с нами по адресу [browser-autofill@support.yandex.ru](mailto:browser-autofill@support.yandex.ru).

{% endcut %}

</div>



<!-- source: ru/_includes/footer.md -->
<div width="100%" align="center" class="main-footer"> 
<br><br><br>
Также вы можете перейти на сервис 
<br><br>


[![](../_assets/logo/logo-pic.svg)](https://webmaster.yandex.ru/) [![](../_assets/logo/logo-ru.svg)](https://webmaster.yandex.ru/)





</div>


<!-- source: ru/_includes/styles/footer-style.md -->

<!-- endsource: ru/_includes/styles/footer-style.md -->
<!-- endsource: ru/_includes/footer.md -->

<!-- source: ru/_includes/cut-button-style.md -->

<!-- endsource: ru/_includes/cut-button-style.md -->