Атрибут autocomplete в HTML

Атрибут autocomplete определяет, должен ли элемент ввода или форма иметь значение autocomplete "on" или "off".

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

TIP

Атрибут autocomplete может быть включен ("on") для всей формы и отключен ("off") для отдельных полей ввода, или наоборот.

TIP

Примечание: Атрибут autocomplete работает с такими типами <input>, как text, search, tel, url, password, email, range и color.

Синтаксис

Синтаксис атрибута autocomplete в HTML

css

<input autocomplete="on|off">

Применяется к	Элементам `<form>` и `<input>`.

Пример атрибута autocomplete в HTML:

Пример атрибута autocomplete в HTML:

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        margin-bottom: 10px;
      }
    </style>
  </head>
  <body>
    <form action="/form/submit" method="get" autocomplete="on">
      <div>
        <label for="name">Enter Your Name:</label>
        <input type="text" name="name" id="name" />
      </div>
      <div>
        <label for="phone">Enter Your Phone Number:</label>
        <input type="number" id="phone" name="phone-number" />
        <br />
      </div>
      <input type="submit" value="Send" />
    </form>
  </body>
</html>

Try it Yourself »

Пример тега HTML `<form>`, где атрибут autocomplete включен:

Пример тега HTML <form>, где атрибут autocomplete включен:

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      input {
        display: block;
        margin-bottom: 10px;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <form action="/form/submit" accept-charset="ISO-8859-1">
      <input type="text" name="name" placeholder="Enter your Name" autofocus />
      <input type="text" name="surname" placeholder="Enter your Surname" />
      <input type="number" name="age" placeholder="Enter your Age" autocomplete="off" />
      <input type="submit" value="Send" />
    </form>
  </body>
</html>

Try it Yourself »

Дополнительные параметры управления поведением "autocomplete":

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

autocomplete="on" или autocomplete="off": Это самый базовый параметр, который включает или отключает autocomplete для элемента формы. Значение "on" включает автозаполнение, а "off" — отключает его.
autocomplete="name": Этот параметр указывает браузеру использовать имя пользователя в качестве значения для автозаполнения поля.
autocomplete="email": Этот параметр указывает браузеру использовать адрес электронной почты пользователя в качестве значения для автозаполнения поля.
autocomplete="new-password": Этот параметр указывает браузеру считать поле новым паролем, поэтому он не будет автоматически подставлять существующий пароль.
autocomplete="current-password": Этот параметр указывает браузеру считать поле текущим паролем, поэтому автозаполнение будет происходить только ранее сохранёнными паролями.
autocomplete="username": Этот параметр указывает браузеру использовать имя пользователя (логин) в качестве значения для автозаполнения поля.
autocomplete="cc-name", autocomplete="cc-number", autocomplete="cc-exp", autocomplete="cc-csc": Эти параметры используются для полей кредитных карт и указывают браузеру использовать имя владельца карты, номер карты, срок действия или код безопасности в качестве значения для автозаполнения.
autocomplete="postal-code", autocomplete="address-level1", autocomplete="address-level2", autocomplete="address-level3", autocomplete="country": Эти параметры используются для полей адреса и указывают браузеру использовать почтовый индекс, штат/регион, город, уличный адрес или страну в качестве значения для автозаполнения.

Это лишь некоторые примеры параметров autocomplete, доступных в HTML. Полный список параметров и их описания можно найти в спецификации HTML.

Практика

Что делает атрибут autocomplete в HTML?

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

Атрибут autocomplete в HTML ​

Синтаксис ​

Пример атрибута autocomplete в HTML: ​

Пример тега HTML <form>, где атрибут autocomplete включен: ​