Атрибут HTML: autocomplete

Атрибут HTML autocomplete позволяет разработчикам веб-приложений указать, имеет ли агент пользователя разрешение на автоматическое заполнение значений полей формы, а также предоставить браузеру информацию о типе ожидаемых данных в поле.

Он доступен для элементов <input>, принимающих текстовые или числовые значения, элементов <textarea>, элементов <select> и элементов <form>.

Попробуйте

Описание

Атрибут autocomplete предоставляет подсказку агенту пользователя, определяя, как и нужно ли предварительно заполнять элемент управления формой. Значение атрибута — это ключевое слово off или on, или упорядоченный список токенов, разделённых пробелами.

html

<input autocomplete="off" />
<input autocomplete="on" />
<input autocomplete="shipping street-address" />
<input autocomplete="section-user1 billing postal-code" />

Если у элемента <input>, <select> или <textarea> нет атрибута autocomplete, браузер будет использовать атрибут autocomplete атрибут **соответствующей формы**. Соответствующей формой является форма <form>, которая соответствует значению, указанному в атрибуте form элемента (если он присутствует), или, чаще всего, форма, в которую вложен элемент.

Примечание: Для обеспечения автозаполнения агенты пользователя могут потребовать, чтобы элементы <input>/<select>/<textarea>:

Имели атрибуты name и/или id
Были потомками элемента <form>
Принадлежали форме с кнопкой submit

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

Некоторые токены могут использоваться более одного раза с потенциально разными ожидаемыми значениями, например, токен zip-code в форме, содержащей адреса доставки и выставления счетов. Включение нескольких различных токенов в список, разделённый пробелами, приводит к тому, что связанным элементам управления формы присваиваются уникальные значения автозаполнения: в этом случае autocomplete="shipping zip-code" и autocomplete="billing zip-code".

Некоторые значения автозаполнения могут потребоваться для повторного использования. Например, форма может содержать несколько адресов доставки и, следовательно, несколько вхождений "shipping zip-code", всё ещё ожидая разные значения. Чтобы сделать значение автозаполнения уникальным в этих случаях, первым токеном в списке токенов, разделённых пробелами, может быть токен section-*, где первые восемь символов токена всегда являются строкой "section-", за которой следует буквенно-цифровая строка. Все поля форм, которым присвоен токен section-* с той же буквенно-цифровой строкой, принадлежат одной и той же **именуемой группе**.

Если атрибут autocomplete включен для скрытых элементов ввода hidden (<input type="hidden">), его значение должно быть упорядоченным списком токенов, разделённых пробелами; ключевые слова on и off недопустимы.

Источник предлагаемых значений обычно зависит от браузера; как правило, значения берутся из ранее введённых пользователем значений, но они также могут быть взяты из предопределённых значений. Например, браузер может позволить пользователю сохранить своё имя, адрес, номер телефона и адрес электронной почты для целей автозаполнения. Браузер также может предложить возможность сохранения зашифрованных данных кредитных карт для автозаполнения после процедуры аутентификации.

Примечание: Атрибут autocomplete также управляет тем, будет ли Firefox — в отличие от других браузеров — сохранять динамическое состояние disabled и (применимо) динамическое состояние checked элемента <input>, элемента <textarea> или всей <form> при переходе на страницу. Функция сохранения включена по умолчанию. Установка значения атрибута autocomplete в off отключает эту функцию. Это работает даже в том случае, когда атрибут autocomplete обычно не применяется из-за type. См. ошибку Firefox 654072.

Значения

Значение атрибута — это ключевое слово off или on, или список токенов, разделённых пробелами, описывающих значение автозаполнения.

off: Браузеру запрещено автоматически вводить или выбирать значение для этого поля. Возможно, документ или приложение предоставляет собственную функцию автозаполнения, или же соображения безопасности требуют, чтобы значение поля не вводилось автоматически.

Примечание: В большинстве современных браузеров установка autocomplete в "off" не предотвратит запросы менеджера паролей к пользователю о желании сохранить имя пользователя и пароль или автоматическое заполнение этих значений в форме входа на сайт. См. Управление автозаполнением для полей входа.
on: Браузеру разрешено автоматически заполнять поле. Инструкции по типу ожидаемых данных в поле не предоставляются, поэтому браузер может использовать собственное суждение.
<token-list>: Упорядоченный набор токенов, разделённых пробелами, состоящих из токенов деталей автозаполнения, предваряемых необязательными токенами секционирования и либо токенами группировки по выставлению счетов, либо по доставке. Номера телефонов, адреса электронной почты и токены протоколов обмена сообщениями предваряются токеном, определяющим тип получателя.

См. стандарт WHATWG для получения дополнительной информации.

Токены списка токенов

Параметры <token-list> включают, в порядке следования:

Маркер наименования групп
Идентификатор группировки
Детальные маркеры
Веб-авторизация

Названные группы

Для создания названной группы полей формы можно использовать необязательный маркер section-*. Если он присутствует, этот маркер должен быть первым в списке маркеров, разделённых пробелами.

"section-*": Определяет имя группы элементов управления формы. Маркер, первые восемь символов которого — строка "section-", без учёта регистра, за которой следуют дополнительные символы. Все элементы управления формы, начинающиеся с того же маркера, принадлежат к названной группе.

Идентификатор группировки

Необязательный идентификатор группировки shipping или billing

"shipping": Поле, идентифицируемое последующими маркерами, является частью адресной строки доставки или контактной информации.
"billing": Поле, идентифицируемое последующими маркерами, является частью адресной строки выставления счёта или контактной информации.

Детальные маркеры

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

Тип получателя

Маркеры, идентифицирующие тип получателя, включают:

"home": Тип контакта, определяемый последующими маркерами, предназначен для связи с получателем по домашнему адресу.
"work": Тип контакта, определяемый последующими маркерами, предназначен для связи с получателем по рабочему адресу.
"mobile": Тип контакта, определяемый последующими маркерами, предназначен для связи с получателем независимо от местоположения.
"fax": Получатель, идентифицируемый последующими маркерами, предназначен для факса.
"page": Получатель, идентифицируемый последующими маркерами, предназначен для пейджера или беспроводного вызывного устройства.

Цифровые маркеры контактов

Маркер или группа маркеров для телефонных номеров или составляющих номера, телефонных номеров, адресов электронной почты или протоколов обмена мгновенными сообщениями.

"tel"

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

"tel-country-code": Код страны, например, "1" для США, Канады и других регионов Северной Америки и некоторых частей Карибского бассейна.
"tel-national": Весь телефонный номер без кода страны, включая внутренний префикс страны. Для телефонного номера "1-855-555-6502" значение этого поля будет "855-555-6502".
"tel-area-code": Код города, с любым применённым внутренним префиксом страны, если это необходимо.
"tel-local": Телефонный номер без кода страны или города. Это можно разделить ещё на две части для телефонных номеров, имеющих номер станции, а затем номер в пределах станции. Для телефонного номера "555-6502" используйте "tel-local-prefix" для "555" и "tel-local-suffix" для "6502".

"tel-extension"

Код телефонного доп. номера внутри телефонного номера, например, номер комнаты или люкса в отеле или внутренний номер телефона в компании.

"email"

Адрес электронной почты.

"impp"

URL для конечной точки протокола обмена мгновенными сообщениями, например, "xmpp:username@example.net".

Другие маркеры

Когда поле формы не является телефонным номером, адресом электронной почты или протоколом обмена мгновенными сообщениями, список маркеров, разделённых пробелами, не предшествует типу контакта:

"name"

Поле ожидает значение в виде полного имени человека. Использование "name" вместо разделения имени на составляющие обычно предпочтительнее, так как это позволяет избежать проблем с широким разнообразием имен и их структуры; однако, вы можете использовать следующие autocomplete значения, если вам необходимо разделить имя на составляющие:

"honorific-prefix": Префикс или звание, например, «Г-жа», «Г-н», «Девушка», «Г-жа», «Доктор» или «Мадемуазель».
"given-name": Имя (или «первое» имя).
"additional-name": Отчество.
"family-name": Фамилия.
"honorific-suffix": Суффикс, например, «мл.», «бакалавр», «доктор», «MBA», или «IV».
"nickname": Псевдоним или прозвище.

"username"

Имя пользователя или имя учетной записи.

"new-password"

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

"current-password"

Текущий пароль пользователя.

"one-time-code"

Одноразовый пароль (OTP) для проверки личности пользователя, который используется как дополнительный фактор при входе в систему. Чаще всего это код, полученный через какой-либо внеканальный механизм, например, SMS, электронную почту или приложение для аутентификации.

"organization-title"

Должность или звание человека в организации, например, «Старший технический писатель», «Президент» или «Помощник командира отряда».

"organization"

Название компании или организации, например, «Компания Acme Widget» или «Девочки-скауты Америки».

"street-address"

Адрес улицы. Он может содержать несколько строк текста и должен полностью идентифицировать местоположение адреса на втором административном уровне (как правило, город или поселок), но не должен включать название города, почтовый индекс или страну.

"address-line1", "address-line2", "address-line3": Каждая отдельная строка адреса улицы. Они должны присутствовать только в том случае, если «street-address» отсутствует.

"address-level4"

Наиболее подробный административный уровень в адресах с четырьмя уровнями.

"address-level3"

Третий административный уровень в адресах, содержащих как минимум три административных уровня.

"address-level2"

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

"address-level1"

Первый административный уровень в адресе. Обычно это провинция, в которой расположен адрес. В США это штат. В Швейцарии - кантон. В Соединённом Королевстве - почтовый город.

"country"

Код страны или территории.

"country-name"

Название страны или территории.

"postal-code"

Почтовый индекс (в США это почтовый индекс).

"cc-name"

Полное имя, напечатанное на платежном инструменте, например, на кредитной карте. Использование поля с полным именем обычно предпочтительнее, чем разделение имени на части.

"cc-given-name": Имя (первое), указанное на платежном инструменте, например, на кредитной карте.
"cc-additional-name": Отчество, указанное на платежном инструменте или кредитной карте.
"cc-family-name": Фамилия, указанная на кредитной карте.

"cc-number"

Номер кредитной карты или другой номер, идентифицирующий способ оплаты, например, номер счета.

"cc-exp"

Срок действия способа оплаты, обычно в формате «ММ/ГГ» или «ММ/ГГГГ».

"cc-exp-month": Месяц окончания действия способа оплаты.
"cc-exp-year": Год окончания действия способа оплаты.

"cc-csc"

Код безопасности платежного инструмента; на кредитных картах это трехзначный контрольный номер на обратной стороне карты.

"cc-type"

Тип платежного инструмента (например, «Виза» или «МастерКард»).

"transaction-currency"

Валюта, в которой будет произведена транзакция.

"transaction-amount"

Сумма транзакции в валюте, указанной в «transaction-currency», для формы оплаты.

"language"

Предпочитаемый язык, указанный как допустимый тег языка BCP 47.

"bday"

Дата рождения в полном виде.

"bday-day": Число месяца даты рождения.
"bday-month": Месяц года даты рождения.
"bday-year": Год даты рождения.

"sex"

Пол (например, «Женский», «Фаафафине», «Хиджра», «Мужской», «Небинарный») в виде свободного текста без перевода строк.

"url"

URL, такой как домашняя страница или адрес веб-сайта компании, соответствующий контексту других полей в форме.

"photo"

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

Токен веб-аутентификации

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

"webauthn": Ключи, сгенерированные API аутентификации веб-приложений Web Authentication API, как запрошено условным вызовом navigator.credentials.get() (т. е. с включённым mediation: 'conditional'). При включении это последний токен в списке токенов, разделённых пробелами. Подробнее см. Вход с помощью passkey через автозаполнение форм.

Примеры

html

<div>
  <label for="cc-number">Enter your credit card number</label>
  <input name="cc-number" id="cc-number" autocomplete="off" />
</div>

Административные уровни в адресах

Четыре поля административного уровня (address-level1 по address-level4) описывают адрес в терминах возрастающего уровня точности внутри страны, в которой расположен адрес. Каждая страна имеет свою систему административных уровней, и может упорядочить уровни в разном порядке при написании адресов.

address-level1 всегда представляет собой самое широкое административное деление; это наименее специфическая часть адреса помимо имени страны.

Гибкость макета формы

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

Варианты

Способ использования каждого административного уровня будет различаться в зависимости от страны. Ниже приведены некоторые примеры; это не предполагает исчерпывающий список.

Соединённые Штаты Америки

Типичный домашний адрес в Соединённых Штатах выглядит так:

432 Anywhere St Exampleville CA 95555

В Соединённых Штатах наименее конкретная часть адреса — это штат, в данном случае «CA» (официальное сокращение почтовой службы США для «Калифорния»). Таким образом, address-level1 — это штат или «CA» в данном случае.

Вторая по степени неконкретности часть адреса — это название города или поселка, поэтому address-level2 — это «Exampleville» в примере адреса.

Адреса в Соединённых Штатах не используют уровни 3 и выше.

Соединённое Королевство

Формы ввода адреса в Великобритании должны содержать один уровень адреса и одну, две или три строки адреса, в зависимости от адреса. Полный адрес будет выглядеть так:

103 Frogmarch Street Upper-Wapping Winchelsea TN99 8ZZ

Уровни адреса:

address-level1: Почтовый город — «Winchelsea» в данном случае.
address-line2: Населенный пункт — «Upper-Wapping» в данном случае.
address-line1: Данные о доме/улице — «103 Frogmarch Street».

Почтовый индекс указан отдельно. Обратите внимание, что в Великобритании для успешной доставки почты можно использовать только почтовый индекс и address-line1, поэтому они должны быть единственными обязательными элементами, но обычно люди предоставляют более подробную информацию.

Китай

В Китае может использоваться до трёх административных уровней: провинция, город и район.

Почтовый индекс из 6 цифр не всегда нужен, но если он указан, он размещается отдельно с пометкой для ясности. Например:

北京市东城区建国门北大街 8 号华润大厦 17 层 1708 单元邮编：100005

Япония

Адрес в Японии обычно записывается в одной строке, в порядке от наименее конкретных к более конкретным частям (в обратном порядке по сравнению с Соединёнными Штатами). В адресе есть два или три административных уровня. Дополнительная строка может использоваться для отображения названий зданий и номеров комнат. Почтовый индекс указан отдельно. Например:

〒 381-0000 長野県長野市某町 123

«〒» и следующие семь цифр показывают почтовый индекс.

address-level1 используется для префектур или столичного округа Токио; «長野県» (префектура Нагано) — в данном случае. address-level2 обычно используется для городов, уездов, поселков и деревень; «長野市» (город Нагано) — в данном случае. «某町 123» — address-line1, который состоит из названия района и номера участка.

Технические характеристики

Спецификация
Стандарт HTML # attr-form-autocomplete
Стандарт HTML # attr-fe-autocomplete

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`autocomplete`	66	79	59	53	9.1	66	59	47	9.3	9.0	66
`new-password`	Нет	Нет	67	Нет	Нет	Нет	67	Нет	Нет	Нет	Нет
`one-time-code`	93	93	109	79	12	84	109	60	12	14.0	Нет
`webauthn`	108	108	Нет	94	Нет	108	Нет	73	Нет	21.0	108

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`autocomplete`	66	79	59	53≤12.1–15	9.1	66	59	47≤12.1–14	9.3	9.0	66

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`autocomplete`	14	12	4	≤12.1	6	18	4	≤12.1	6	1.0	4.4

	Рабочий стол					Мобильный телефон
	Хром	Эдж	Файрфокс	Опера	Сафари	Хром для Android	Файрфокс для Android	Опера для Android	Сафари на iOS	Samsung Internet	WebView для Android
`autocomplete`	14 Интерфейс Google Chrome для запроса автозаполнения меняется в зависимости от того, установлено ли значение `autocomplete` в `off` для элементов `<input>` и их формы. В частности, если у формы установлено `autocomplete` в значение `off`, а у элемента `<input>` не установлено свойство `autocomplete`, то при запросе пользователем предложений автозаполнения для элемента `<input>`, Chrome может отобразить сообщение "Автозаполнение отключено для этой формы". С другой стороны, если у формы и элемента ввода установлено значение `autocomplete` в `off`, то браузер не отобразит это сообщение. По этой причине вы должны установить `autocomplete` в значение `off` для каждого элемента `<input>`, имеющего пользовательское автозаполнение.	12	4	15 Интерфейс Opera для запроса автозаполнения меняется в зависимости от того, установлено ли значение `autocomplete` в `off` для элементов `<input>` и их формы. В частности, если у формы установлено `autocomplete` в значение `off`, а у элемента `<input>` не установлено свойство `autocomplete`, то при запросе пользователем предложений автозаполнения для элемента `<input>`, Opera может отобразить сообщение "Автозаполнение отключено для этой формы". С другой стороны, если у формы и элемента ввода установлено значение `autocomplete` в `off`, то браузер не отобразит это сообщение. По этой причине вы должны установить `autocomplete` в значение `off` для каждого элемента `<input>`, имеющего пользовательское автозаполнение.	6	18 Интерфейс Google Chrome для запроса автозаполнения меняется в зависимости от того, установлено ли значение `autocomplete` в `off` для элементов `<input>` и их формы. В частности, если у формы установлено `autocomplete` в значение `off`, а у элемента `<input>` не установлено свойство `autocomplete`, то при запросе пользователем предложений автозаполнения для элемента `<input>`, Chrome может отобразить сообщение "Автозаполнение отключено для этой формы". С другой стороны, если у формы и элемента ввода установлено значение `autocomplete` в `off`, то браузер не отобразит это сообщение. По этой причине вы должны установить `autocomplete` в значение `off` для каждого элемента `<input>`, имеющего пользовательское автозаполнение.	4	14 Интерфейс Opera для запроса автозаполнения меняется в зависимости от того, установлено ли значение `autocomplete` в `off` для элементов `<input>` и их формы. В частности, если у формы установлено `autocomplete` в значение `off`, а у элемента `<input>` не установлено свойство `autocomplete`, то при запросе пользователем предложений автозаполнения для элемента `<input>`, Opera может отобразить сообщение "Автозаполнение отключено для этой формы". С другой стороны, если у формы и элемента ввода установлено значение `autocomplete` в `off`, то браузер не отобразит это сообщение. По этой причине вы должны установить `autocomplete` в значение `off` для каждого элемента `<input>`, имеющего пользовательское автозаполнение.	6	1.0 Интерфейс Samsung Internet для запроса автозаполнения меняется в зависимости от того, установлено ли значение `autocomplete` в `off` для элементов `<input>` и их формы. В частности, если у формы установлено `autocomplete` в значение `off`, а у элемента `<input>` не установлено свойство `autocomplete`, то при запросе пользователем предложений автозаполнения для элемента `<input>`, Samsung Internet может отобразить сообщение "Автозаполнение отключено для этой формы". С другой стороны, если у формы и элемента ввода установлено значение `autocomplete` в `off`, то браузер не отобразит это сообщение. По этой причине вы должны установить `autocomplete` в значение `off` для каждого элемента `<input>`, имеющего пользовательское автозаполнение.	4.4 Интерфейс Google Chrome для запроса автозаполнения меняется в зависимости от того, установлено ли значение `autocomplete` в `off` для элементов `<input>` и их формы. В частности, если у формы установлено `autocomplete` в значение `off`, а у элемента `<input>` не установлено свойство `autocomplete`, то при запросе пользователем предложений автозаполнения для элемента `<input>`, Chrome может отобразить сообщение "Автозаполнение отключено для этой формы". С другой стороны, если у формы и элемента ввода установлено значение `autocomplete` в `off`, то браузер не отобразит это сообщение. По этой причине вы должны установить `autocomplete` в значение `off` для каждого элемента `<input>`, имеющего пользовательское автозаполнение.
`new-password`	Нет	Нет	67	Нет	Нет	Нет	67	Нет	Нет	Нет	Нет
`one-time-code`	93	93	109	79	12	84	109	60	12	14.0	Нет
`webauthn`	108	108	Нет	94	Нет	108	Нет	73	Нет	21.0	108

html.elements.form.autocomplete

Таблицы BCD загружаются только в браузере

html.elements.input.autocomplete

Таблицы BCD загружаются только в браузере

html.elements.select.autocomplete

Таблицы BCD загружаются только в браузере

html.elements.textarea.autocomplete

Таблицы BCD загружаются только в браузере

См. также

Элемент <input>
Элемент <select>
Элемент <textarea>
Элемент <form>
HTML-формы
Все глобальные атрибуты

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete