Атрибут autocomplete тега <input>

Описание

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

Пример использования:
<form> <label>Имя: <input type="text" name="username" autocomplete="name"> </label> <label>Новый пароль: <input type="password" autocomplete="new-password"> </label> </form>

Основные значения:

Значение Применение Пример
on Разрешить автозаполнение (по умолчанию) autocomplete="on"
off Полностью отключить autocomplete="off"
Токены Конкретный тип данных (30+ вариантов) autocomplete="email"

Популярные токены автозаполнения:

<!-- Контактная информация --> <input type="text" autocomplete="name"> <input type="tel" autocomplete="tel"> <input type="email" autocomplete="email"> <!-- Платежные данные --> <input type="text" autocomplete="cc-name"> <input type="text" autocomplete="cc-number"> <!-- Адреса --> <input type="text" autocomplete="street-address"> <input type="text" autocomplete="postal-code">

Рекомендации по безопасности:

  • Используйте autocomplete="off" для полей с чувствительными данными
  • Для паролей применяйте new-password/current-password
  • Указывайте конкретные токены для стандартных полей (имя, email и т.д.)
  • Тестируйте поведение в разных браузерах

Пример для форм входа:

<form> <label>Логин: <input type="text" autocomplete="username"> </label> <label>Пароль: <input type="password" autocomplete="current-password"> </label> <button type="submit">Войти</button> </form>

Ограничения и совместимость:

  • Поддерживается всеми современными браузерами
  • Некоторые браузеры могут игнорировать off для определенных полей
  • Полный список токенов: MDN documentation
  • Для кастомных полей может потребоваться экспериментирование

Примечание: Правильное использование autocomplete значительно улучшает пользовательский опыт, особенно на мобильных устройствах. Для максимальной эффективности сочетайте его с семантическими типами полей (type="email" и т.д.).