Атрибут autocomplete

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

Создадим форму, в которую пользователь будет сам вводить имя, а при заполнении поля 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>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать