Атрибут autocomplete тега <input> — автозаповнення

Атрибут autocomplete визначає чи повине поле мати автопідсказки.

Автозаповнення дозволяє браузеру спрогнозувати значення. Коли користувач починає щось вводити в поле, браузер відображає ймовірні дані для заповнення поля, на основі раніше введених данних.

правити

Загальний опис

правити

Порада

У деяких браузерах потрібно буде самостійно активувати функцію автозаповнення в налаштуваннях браузера.

автор: с3с правити

Нотатка

Автозаповнення з міркувань безпеки може відключатися користувачем в налаштуваннях браузера і в такому випадку не може керуватися атрибутом autocomplete.

автор: с3с правити

Нотатка

Атрибут autocomplete працює з наступними типами поля <input type="text | search | url | telemail | password | datepickers | range | color">.

автор: с3с правити

+ додати пораду чи нотатку

Синтаксис

<input autocomplete="on|off">

Атрибут autocomplete може отримувати 2 значень:

on

Вмикає автозаповнення тексту.

автор: с3с

правити

off

Вимикає автозаповнення. Це значення зазвичай використовується для скасування збереження в браузері важливих даних (паролів, номерів банківських карт).

автор: с3с

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	14	4	6	≤12.1	12	10

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	6

Приклади

+ запропонувати свій приклад у пісочниці

<form>
  <p>
    <label for="mail">Пошта — autocomplete, підставляє браузер зі своєї пам'яті</label><br>
    <input id="mail" name="email" type="email" autocomplete="email">
  </p>
  <p>
    <label for="city">Місто — datalist, підказки ваші й видно одразу</label><br>
    <input id="city" name="city" list="cities" autocomplete="address-level2">
    <datalist id="cities">
      <option value="Київ">
      <option value="Львів">
      <option value="Одеса">
      <option value="Харків">
    </datalist>
  </p>
</form>

label { font-weight: 600; }
input { padding: 6px; font: inherit; min-width: 240px; }
p { margin: 12px 0; }

<p>Приклад форми для входу з використанням атрибуту 'autocomplete'</p>
<hr>
<p>З використанням 'autocomplete'</p>
<form autocomplete="on">
  <label>Ім'я:</label><br>
  <input type="text" name="login"><br>
  
  <label>Прізвище:</label><br>
  <input type="text" name=""><br>
  <br>
  
  <input type="submit" value="Увійти" >
</form>
<br>
<p>Без використання 'autocomplete'</p>
<form  autocomplete="off">
  <label>Ім'я:</label><br>
  <input type="text" name="login"><br>
  
  <label>Прізвище:</label><br>
  <input type="text" name=""><br>
  <br>
  
  <input type="submit" value="Увійти" >
</form>