Атрибут
autocomplete устанавливается у элементов <form>, текстовых полей ввода <input> и <textarea>. Это подсказка для браузера, какие данные ожидаются в полях. Это именно подсказка, полного контроля нет. Браузер сам принимает итоговое решение на основании множества факторов. Типы полей
<input>, значения атрибутов name и id, текст в <label> и placeholder, соседние элементы, иногда даже значения в атрибуте class и некоторые предположения использует браузер, чтобы вычислить данные, потому что формы не всегда спроектированы хорошо. Есть доклад и статья от разработчиков Яндекс Браузера о том, как работает автозаполнение. Так как Яндекс Браузер основан на Chromium, это справедливо для всех браузеров на этом движке. В других движках механизмы схожие.autocomplete вместе с правильно спроектированной формой ускоряет ввод данных и снижает количество ошибок. Браузеры сохраняют пароли, адреса, данные банковских карт, ФИО и некоторые другие данные при заполнении форм на других сайтах. Данные можно добавить вручную в настройках браузера.<form action="/register" method="post">
<label for="firstname">Имя</label>
<input type="text" id="firstname" name="firstname" autocomplete="given-name">
<label for="lastname">Фамилия</label>
<input type="text" id="lastname" name="lastname" autocomplete="family-name">
<label for="phone">Телефон</label>
<input type="tel" id="phone" name="phone" autocomplete="tel">
<label for="email">Email</label>
<input type="email" id="email" name="email" autocomplete="email">
<label for="name">Пароль</label>
<input type="password" id="password" name="password" autocomplete="new-password">
<button>Создать аккаунт</button>
</form>
У
autocomplete не очень много значений, но они покрывают наиболее распространённые сценарии форм: логин, регистрация, оформление заказа, обратная связь. Не исключено, что в будущем появятся новые значения. Например, не так давно было добавлено значение webauthn для Web Authentication API. В качестве значений можно использовать несколько токенов для разграничения, например, адреса доставки и адреса выставления счёта:
<label for="shipping">Адрес доставки</label>
<input type="text" id="shipping" name="shipping" autocomplete="shipping street-address">
<label for="billing">Платёжный адрес</label>
<input type="text" id="billing" name="billing" autocomplete="billing street-address">
Аналогично можно помечать домашний, рабочий и мобильный телефоны (
home tel, work tel или mobile tel). Можно добавлять секции (section-*) для разделения комплексных форм, где есть разделы или динамические группы полей.Если форма размечена корректно, используется
autocomplete и у браузера достаточно данных, то он может заполнить всю форму в один клик. Это очень удобно, особенно на мобильных устройствах. Для максимальной точности советуют использовать распространённые значения для атрибутов name и id, соответствующие типы полей и autocomplete одновременно.Для отладки автозаполнения форм в Chrome 124 добавили новую панель Autofill. Туда можно добавить разные данные и отлаживать, как форма будет заполняться.
#ydkhtml