Клавиша / esc

Атрибут autocomplete

Как не тратить время на заполнения форм? Доверить всё компьютеру!

Время чтения: меньше 5 мин

Кратко

Скопировано

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

Пример

Скопировано

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

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

        
        
          
        
      

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

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

В зависимости от значения атрибута autocomplete, будут подставляться данные разного типа. Ниже приведены возможные значения.

Включение и выключение автозаполнения

Скопировано
  • off — отключает автозаполнение.
  • on — значение по умолчанию; разрешает автозаполнение.

Авторизация

Скопировано
  • nickname — никнейм.
  • username — имя пользователя или название аккаунта.
  • email — адрес электронной почты.
  • current-password — текущий пароль пользователя.
  • new-password — новый пароль.
  • one-time-code — одноразовый код для верификации пользователя.

Формы имени

Скопировано
  • name — полное имя.
  • given-name — имя (в странах, где дают два имени, это первое имя).
  • additional-name — второе имя (для стран, где дают два имени).
  • family-name — фамилия.
  • honorific-prefix — звание или префикс для обращения, например, «Mrs.», «Mr.», «Miss», «Ms.», «Dr.», «Mlle.».
  • honorific-suffix — окончание имени, например, «Jr.», «B.Sc.», «PhD.», «IV», «мл.».

Данные банковской карты и деньги

Скопировано
  • cc-given-name — имя (в странах, где дают два имени, это первое имя), как на банковской карте.
  • cc-additional-name — второе имя, как на банковской карте (для стран, где дают два имени).
  • cc-family-name — фамилия, как на банковской карте.
  • cc-name — полное имя в том виде, как оно указано на банковской карте.
  • cc-csc — код безопасности (три цифры на обороте карты).
  • cc-exp — месяц и год окончания срока действия карты.
  • cc-exp-month — месяц окончания срока действия карты.
  • cc-exp-year — год окончания срока действия карты.
  • cc-number — номер банковской карты или счёта.
  • cc-type — платёжная система.
  • transaction-amount — сумма перевода.
  • transaction-currency — валюта перевода.

Личные данные

Скопировано
  • bday — полная дата рождения.
  • bday-day — день рождения (число).
  • bday-month — месяц рождения.
  • bday-year — год рождения.
  • language — язык в формате языкового тега из списка BCP 47.
  • sex — пол или гендер.
  • organization — название организации.
  • organization-title — профессия или должность в организации.
  • photo - url-адрес изображения.

Адрес

Скопировано
  • address-level1 — административная единица первого уровня. Обычно это название области, региона или штата.
  • address-level2 — административная единица второго уровня. В странах с двумя уровнями это чаще всего название населённого пункта.
  • address-level3 — административная единица третьего уровня.
  • address-level4 — административная единица четвёртого уровня, если адрес её содержит.
  • address-line1, address-line2, address-line3 — отдельные строки для адресов, которые используются, если нет поля со значением street-address.
  • country — код страны.
  • country-name — страна.
  • street-address — адрес, начиная с улицы. Не должен содержать название города, страны и индекс.
  • postal-code — почтовый индекс.

Телефон

Скопировано
  • tel — полный номер телефона, включая код страны.
  • tel-area-code — телефонный код региона страны.
  • tel-country-code — телефонный код страны.
  • tel-extension — добавочный номер.
  • tel-local — номер телефона без кодов страны и региона.
  • tel-local-prefix — номер локальной АТС.
  • tel-local-suffix — номер абонента внутри сети АТС.
  • tel-national — номер телефона без кода страны.

Ссылки

Скопировано
  • impp — адрес сервера для мессенджера, например, xmpp:username@example.net.
  • 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>
          <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" для полей «Введите новый пароль» и «Подтвердите новый пароль», но не для поля «Введите текущий пароль». Это сделано, чтобы случайно не вписать существующий пароль, а также предложить помощь в создании безопасного пароля.