skip to main content

autocomplete

html

Кратко 🔗

Атрибут, при помощи которого форма заполняется в один клик — браузер подставит значения в соответствующие поля.

Пример 🔗

Создадим форму, в которую пользователь будет сам вводить имя, а при заполнении поля e-mail сможет выбрать адрес почты из предложенных браузером вариантов:

<form action="">
<div>
<label for="name">Введите имя</label>
<input id="name" type="text">
</div>
<div>
<label for="email">Электронная почта</label>
<input id="email" type="email" autocomplete="on">
</div>
<button type="submit">Отправить</button>
</form>

Как это понять 🔗

Когда вы заполняете формы, браузер сохраняет те или иные данные — логины, пароли, адреса и e-mail. При заполнении очередной формы браузер идёт в список сохранённой информации, выуживает оттуда данные, которые требуются для этой формы, и вставляет в соответствующие поля.

Как пишется 🔗

<form autocomplete="on">...</form>

Атрибут autocomplete пишется внутри открывающего тега, и в кавычках прописывается его значение.

Кроме элемента <form>, вы можете указать этот атрибут для любого поля, которое требует ввода данных — <input>, принимающий на вход текст или число, <select> или <textarea>.

Список всех возможных значений
  • autocomplete — позволяет вводить данные разного вида в зависимости от значения атрибута. Ниже приведены возможные значения в алфавитном порядке.
  • additional-name — второе имя (для стран, где дают два имени).
  • address-level1 — административная единица первого уровня. Обычно это название области, региона или штата.
  • address-level2 — административная единица второго уровня. В странах с двумя уровнями это чаще всего название населённого пункта.
  • address-level3 — административная единица третьего уровня.
  • address-level4 — административная единица четвёртого уровня, если адрес её содержит.
  • address-line1, address-line2, address-line3 — отдельные строки для адресов, которые используются, если нет поля со значением street-address.
  • bday — полная дата рождения.
  • bday-day — день рождения (число).
  • bday-month — месяц рождения.
  • bday-year — год рождения.
  • cc-additional-name — второе имя, как на банковской карте (для стран, где дают два имени).
  • cc-csc — код безопасности (три цифры на обороте карты).
  • cc-exp — месяц и год окончания срока действия карты.
  • cc-exp-month — месяц окончания срока действия карты.
  • cc-exp-year — год окончания срока действия карты.
  • cc-family-name — фамилия, как на банковской карте.
  • cc-given-name — имя (в странах, где дают два имени, это первое имя), как на банковской карте.
  • cc-name — полное имя в том виде, как оно указано на банковской карте.
  • cc-number — номер банковской карты или счёта.
  • cc-type — платёжная система.
  • country — код страны.
  • country-name — страна.
  • current-password — текущий пароль пользователя.
  • email — адрес электронной почты.
  • family-name — фамилия.
  • given-name — имя (в странах, где дают два имени, это первое имя).
  • honorific-prefix — звание или префикс для уважительного обращения, например, «Mrs.», «Mr.», «Miss», «Ms.», «Dr.», «Mlle.».
  • honorific-suffix — окончание имени, например, «Jr.», «B.Sc.», «PhD.», «IV», «мл.».
  • impp - url для доступа к протоколу обмена мгновенными сообщениями, например, "xmpp:username@example.net".
  • language — язык в формате языкового тега, определённого BCP 47.
  • name — полное имя.
  • new-password — новый пароль.
  • nickname — никнейм.
  • off — отключает автозаполнение.
  • on — значение по умолчанию; разрешает автозаполнение.
  • one-time-code — одноразовый код для верификации пользователя.
  • organization — название организации.
  • organization-title — профессия или должность в организации.
  • photo - url-адрес изображения.
  • postal-code — почтовый индекс.
  • sex — пол или гендер.
  • street-address — адрес, начиная с улицы. Не должен содержать название города, страны и индекс.
  • tel — полный номер телефона, включая код страны.
  • tel-area-code — телефонный код региона страны.
  • tel-country-code — телефонный код страны.
  • tel-extension — добавочный номер.
  • tel-local — номер телефона без кодов страны и региона.
  • tel-local-prefix — номер локальной АТС.
  • tel-local-suffix — номер абонента внутри сети АТС.
  • tel-national — номер телефона без кода страны.
  • transaction-amount — сумма перевода.
  • transaction-currency — валюта перевода.
  • username — имя пользователя или название аккаунта.
  • url — url-адрес сайта.

Подсказки 🔗

💡 Автозаполнение может быть отключено в настройках браузера.

💡 Если автозаполнение не отключено в браузере и атрибут autocomplete не прописан в теге, то его значение по умолчанию принимается за on.

💡 Если задать autocomplete="on" для <form>, то это сработает для всех вложенных элементов формы.

В работе 🔗

🛠 Значение атрибута может перебиваться значениями, прописанными в дочерних элементах.

<form action="" autocomplete="off">
<div>
<label for="name">Введите имя</label>
<input id="name" type="text">
</div>
<div>
<label for="email">Электронная почта</label>
<input id="email" type="email" autocomplete="on">
</div>
<button type="submit">Отправить</button>
</form>

Первый <input> унаследует значение от родительского элемента <form> и не будет заполняться автоматически. Для второго <input> уже будет работать автозамена, поскольку для него прописан autocomplete="on".

🛠 Для правильного автозаполнения желательно, чтобы:

  • у элементов <input>, <select> и <textarea> были прописаны атрибуты name или id;
  • они были обёрнуты в тег <form>;
  • сама форма имела кнопку отправки — <input> или <button> с атрибутом type="submit".

🛠 Если пользователь должен ввести имя, рекомендуется использовать значение autocomplete="name" вместо разделения на поля с отдельными частями имени, потому что имена могут быть иметь совершенно разную структуру.

🛠 По той же причине рекомендуется использовать значение autocomplete="cc-name", если нужно вводить данные банковской карты.

🛠 При создании нового аккаунта или изменении пароля следует использовать autocomplete="new-password" для полей «Введите новый пароль» и «Подтвердите новый пароль», но не для поля «Введите текущий пароль». Это сделано, чтобы случайно не вписать существующий пароль, а также предложить помощь в создании безопасного пароля.

Автор: Лена,