HTML-атрибут autocomplete
Атрибут autocomplete в HTML: значения on и off, именованные токены автозаполнения, безопасность и доступность.
Атрибут autocomplete управляет тем, может ли браузер автоматически заполнять поле формы за пользователя. Когда он включён и пользователь начинает вводить текст, браузер предлагает значения, сохранённые при предыдущих отправках форм (имена, email-адреса, почтовые адреса и т. д.), чтобы поле можно было заполнить одним нажатием.
На этой странице рассматриваются два базовых значения (on и off), именованные токены автозаполнения, которые сообщают браузеру тип данных в поле, случаи отключения autocomplete, а также связанные вопросы безопасности и доступности.
Примечание: атрибут autocomplete работает с такими типами <input>, как text, search, tel, url, password, email, range и color.
Синтаксис
Синтаксис атрибута autocomplete в HTML
<input autocomplete="on|off">Вместо on/off можно использовать именованный токен, описывающий назначение поля:
<input type="email" name="email" autocomplete="email">
<input type="password" name="password" autocomplete="new-password">| Применяется к | Элементам <form> и <input>. |
|---|
Пример атрибута autocomplete в 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>Пример тега HTML <form> с включённым атрибутом autocomplete:
<!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" autocomplete="on">
<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" />
<input type="submit" value="Send" />
</form>
</body>
</html>Использование именованных токенов автозаполнения
Вместо простых значений on или off каждому полю можно задать токен, описывающий тип хранимого значения. Тогда браузер предложит нужные сохранённые данные: email пользователя, адрес доставки, новый сгенерированный пароль и т. д. Именованные токены делают автозаполнение значительно точнее, чем обобщённое on.
Пример ниже объединяет форму адреса и раздел входа в систему. Обратите внимание на autocomplete="email" для поля email и autocomplete="new-password" для поля пароля при регистрации — это сигнализирует браузеру предложить новый сгенерированный пароль, а не уже сохранённый.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
label { display: block; margin-top: 10px; }
input { padding: 8px; width: 240px; }
</style>
</head>
<body>
<form action="/form/submit" method="post" autocomplete="on">
<label for="fullname">Full name</label>
<input type="text" id="fullname" name="fullname" autocomplete="name" />
<label for="email">Email</label>
<input type="email" id="email" name="email" autocomplete="email" />
<label for="street">Street address</label>
<input type="text" id="street" name="street" autocomplete="address-line1" />
<label for="city">City</label>
<input type="text" id="city" name="city" autocomplete="address-level2" />
<label for="zip">Postal code</label>
<input type="text" id="zip" name="zip" autocomplete="postal-code" />
<label for="password">Create a password</label>
<input type="password" id="password" name="password" autocomplete="new-password" />
<input type="submit" value="Sign up" />
</form>
</body>
</html>Распространённые токены автозаполнения
Стандарт HTML определяет более 50 токенов автозаполнения. В таблице ниже перечислены наиболее часто используемые. Полный авторитетный список см. в спецификации WHATWG по автозаполнению.
| Токен | Назначение поля |
|---|---|
name | Полное имя |
given-name | Имя |
family-name | Фамилия |
nickname | Никнейм или псевдоним |
username | Логин аккаунта |
email | Адрес электронной почты |
tel | Полный номер телефона |
street-address | Полный почтовый адрес (многострочный) |
address-line1 | Первая строка адреса |
address-line2 | Вторая строка (квартира, офис) |
address-level2 | Город или населённый пункт |
address-level1 | Штат, область или регион |
postal-code | Почтовый индекс |
country | Код страны (например, US) |
country-name | Название страны |
cc-name | Имя владельца платёжной карты |
cc-number | Номер платёжной карты |
cc-exp | Срок действия карты |
cc-csc | Код безопасности карты (CVC/CVV) |
current-password | Существующий пароль (для входа) |
new-password | Новый пароль (для регистрации или смены) |
one-time-code | Одноразовый код подтверждения (OTP) |
bday | Полная дата рождения |
Когда (и зачем) отключать autocomplete
В большинстве случаев автозаполнение следует оставлять включённым, поскольку оно экономит время ввода и снижает количество ошибок. Существует несколько обоснованных причин для его отключения:
- Одноразовые и конфиденциальные коды. Поля для одноразовых паролей, ответов CAPTCHA и других значений, которые не должны сохраняться, — подходящие кандидаты. Для поля OTP предпочтительнее использовать
autocomplete="one-time-code"вместоoff, чтобы мобильные устройства могли предлагать код из SMS, не сохраняя его постоянно. - Собственный интерфейс автозаполнения. Если приложение предоставляет свой выпадающий список подсказок (например, поиск города или товара через
<datalist>или JavaScript-виджет), встроенное автозаполнение браузера может мешать — в таком случае его можно отключить. - Общие устройства и киоски, конфиденциальность. На общедоступных терминалах нежелательно, чтобы браузер сохранял или подставлял персональные данные следующего пользователя.
Важно: autocomplete="off" — лишь подсказка. Для полей пароля Chrome и Safari часто игнорируют её, чтобы встроенные менеджеры паролей продолжали работать, что считается функцией безопасности. Чтобы браузер не предлагал уже сохранённый пароль, используйте autocomplete="new-password" для соответствующего поля вместо off.
Замечание о безопасности: отключение autocomplete не делает форму более защищённой. Сохранённые данные по-прежнему хранятся в менеджере паролей браузера, а принуждение пользователей вводить длинные пароли вручную провоцирует использование слабых и повторяющихся паролей. Более безопасный подход — помечать поля правильными токенами (current-password, new-password, one-time-code), чтобы менеджеры паролей и браузер обрабатывали данные разумно.
Доступность и UX
Именованные токены автозаполнения — это не только удобство, но и инструмент обеспечения доступности:
- Они удовлетворяют Критерию успеха WCAG 2.1 1.3.5 «Определение назначения поля ввода», требующему, чтобы назначение стандартных полей формы было программно идентифицируемо.
- Они позволяют менеджерам паролей надёжно заполнять учётные данные, а мобильным браузерам — показывать подходящую экранную клавиатуру.
- Отключение autocomplete может стать барьером для пользователей с когнитивными нарушениями, двигательными ограничениями или нарушениями памяти, которые опираются на сохранённые значения при заполнении форм. Отключайте его только при наличии реальной причины.
Связанные темы: autofocus перемещает курсор в поле при загрузке, а глава про <input> описывает типы полей, с которыми используются эти токены.