Как отключить автозаполнение css
Перейти к содержимому

Как отключить автозаполнение css

  • автор:

Атрибут autocomplete

Атрибут autocomplete отменяет автоматическое автозаполение формы.

Автоматическое автозаполение — это когда браузер предлагает подставить в поле те данные, которые уже вводились в это поле ранее. Это может быть не всегда удобным, так как, к примеру, браузер может подсказать ваш логин или пароль злоумышленнику и т.п. Для полей, в которые вводится секретная информация, автозаполнение следует отключать.

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

Является атрибутом без значения.

Значения

Значение Описание
on Автозаполнение включено (это значение по умолчанию).
off Автозаполнение отключено.

Пример

Давайте у инпута включим автозаполнение. Вбейте в него, к примеру, слово «автозаполнение» и нажмите на кнопку отправки (это обязательно, так как браузер запоминает только отправленные слова). После этого вернитесь к примеру и введите в него букву «a» — браузер подскажет вам слово «автозаполнение» и вы сможете выбрать его, не вводя целиком:

Пример

А теперь давайте автозаполнение отключим. Проделайте те же манипуляции, что и в предыдущем примере, но никаких подсказок появляться не будет:

Смотрите также

  • тег datalist ,
    который создает автозаполнение по вашему списку

Отключаем автозаполнение формы HTML: безопасно и валидно

Для отключения автозаполнения в форме, присвойте атрибут autocomplete=»off» элементам . Чтобы усилить защиту конфиденциальных данных, например, в полях ввода паролей, рекомендуется при каждой загрузке формы генерировать новое значение атрибута name .

Скопировать код

  >" autocomplete="off">

Тем не менее, запомните, что некоторые браузеры могут проигнорировать эту настройку в целях повышения комфорта пользования.

Балансировка между безопасностью и стандартами

Хотя стандартам W3C следует уделять достаточное внимание, не позволяйте им мешать вам обеспечивать соответствующую безопасность. Когда речь идет о работе с конфиденциальными данными, безопасность всегда должна быть на первом месте.

Браузеры и HTTPS: скрытое преимущество

Вы, возможно, заметили, что некоторые браузеры автоматически отключают автозаполнение на веб-сайтах, использующих протокол HTTPS. Это скорее приятный бонус, нежели правило.

Программирование автозаполнения: JavaScript придет на помощь

Если вам необходимо убедиться, что автозаполнение отключено во всех браузерах, используйте JavaScript для динамического добавления атрибута autocomplete=»off» при загрузке формы.

Рандомизация имен полей: безопасность через случайность

Браузеры известны своей способностью запоминать названия полей, чтобы предугадать, какую информацию вам может потребоваться в будущем. Рандомизация названий полей – это способ перехитрить их предсказательную логику.

Даже Amazon это делает: успешные примеры использования

Ищете вдохновения? Обратите внимание на Amazon: они успешно используют autocomplete в своих формах. Если это подходит для такого масштаба, вероятно, и вам это будет полезно.

Пользовательский опыт: баланс в дизайне

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

Важные регуляции: соответствие требованиям закона

В таких сферах, как банковская и медицинская, отключение автозаполнения не только рекомендуется, но и является законодательно обязательным требованием.

Предупреждения W3C и выбор между ними

Иногда наступают моменты, когда нужно спокойно относиться к предложениям и продолжать работу, несмотря ни на что. Другими словами, можно игнорировать замечания ради повышения безопасности.

Визуализация

Представьте вашу форму как дом, где каждое поле ввода – это дверь.

До отключения автозаполнения:������ — Дверь открыта, свободный доступ для всех.

После отключения автозаполнения:������ — Дверь закрыта, быстрый доступ недоступен.

Использование autocomplete=»off» можно сравнить с нажатием огромной кнопки блокировки. Но будьте внимательны, некоторые браузеры могут попытаться «взломать» эту блокировку.

Полезные материалы

  1. Стандарт HTML — официальная спецификация autocomplete .
  2. Атрибут автозаполнения input на W3Schools — понятное руководство по использованию autocomplete .
  3. Атрибут HTML: autocomplete – MDN — подробное пояснение атрибута autocomplete от Mozilla.
  4. Chrome игнорирует autocomplete=»off» — обсуждение на Stack Overflow о подходах различных браузеров к autocomplete .
  5. Отключение автозаполнения для input | CSS-Tricks — советы по отключению автозаполнения с CSS-Tricks.
  6. Плейсхолдеры в полях форм – вредная практика — статья группы Nielsen Norman о плейсхолдерах и их влиянии на пользовательский опыт и autocomplete .
  7. Создание доступных форм – WebAIM — рекомендации по созданию доступных форм, а также о значении autocomplete в этом контексте.

Как убрать автозаполнение input?

Еще один вопрос, работаю с input и постоянно предлагает выбрать предыдущие данные, как это убрать? Заранее спасибо.

Отслеживать
задан 4 июл 2018 в 16:30
user302416 user302416

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

Или на всю форму

Отслеживать
ответ дан 4 июл 2018 в 16:35
user176262 user176262

На текущий момент, лично для меня, этот вариант оказался наиболее универсальным. Так как во многих браузерах параметр autocomplete=»off» сейчас игнорируется и так или иначе, начинает срабатывать автозаполнение.

Отслеживать
ответ дан 4 мая 2022 в 8:08
148 12 12 бронзовых знаков

    Важное на Мете
Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.2.16.5008

How to turn off form autocompletion

В этой статье объясняется как можно отключить автозаполнение полей на сайте.

Эти функции обычно включены по умолчанию, но они могут вызвать проблемы конфиденциальности пользователей, поэтому браузеры могут позволить отключать их. Однако некоторые данные, представленные в формах, либо не будут полезны в будущем (например, одноразовый пин-код), либо содержат конфиденциальную информацию (например, уникальный правительственный идентификатор или код безопасности кредитной карты). Как автор сайта, вы можете предпочесть, чтобы браузер не запоминал значения для таких полей, даже если в браузере включена функция автозаполнения.

It is important to know that if you turn off autocomplete, you are breaking the rule 1.3.5: Identify Input Purpose in WCAG 2.1. If you are making a website that should follow WCAG, you should use autocomplete with autofill.

Disabling autocompletion

To disable autocompletion in forms, you can set the autocomplete (en-US) attribute to «off»:

You can do this either for an entire form, or for specific input elements in a form:

form method="post" action="/form" autocomplete="off">[…]form> 
form method="post" action="/form"> […] div> label for="cc">Credit card:label> input type="text" id="cc" name="cc" autocomplete="off" /> div> form> 

Setting autocomplete=»off» on fields has two effects:

  • It tells the browser not to save data inputted by the user for later autocompletion on similar forms, though heuristics for complying vary by browser.
  • It stops the browser from caching form data in the session history. When form data is cached in session history, the information filled in by the user is shown in the case where the user has submitted the form and clicked the Back button to go back to the original form page.

If a browser keeps on making suggestions even after setting autocomplete to off, then you have to change the name attribute of the input element.

The autocomplete attribute and login fields

Modern browsers implement integrated password management: when the user enters a username and password for a site, the browser offers to remember it for the user. When the user visits the site again, the browser autofills the login fields with the stored values.

Additionally, the browser enables the user to choose a master password that the browser will use to encrypt stored login details.

Even without a master password, in-browser password management is generally seen as a net gain for security. Since users do not have to remember passwords that the browser stores for them, they are able to choose stronger passwords than they would otherwise.

For this reason, many modern browsers do not support autocomplete=»off» for login fields:

  • If a site sets autocomplete=»off» for a , and the form includes username and password input fields, then the browser still offers to remember this login, and if the user agrees, the browser will autofill those fields the next time the user visits the page.
  • If a site sets autocomplete=»off» for username and password fields, then the browser still offers to remember this login, and if the user agrees, the browser will autofill those fields the next time the user visits the page.

This is the behavior in Firefox (since version 38), Google Chrome (since 34), and Internet Explorer (since version 11).

Preventing autofilling with autocomplete=»new-password»

If you are defining a user management page where a user can specify a new password for another person, and therefore you want to prevent autofilling of password fields, you can use autocomplete=»new-password» .

This is a hint, which browsers are not required to comply with. However modern browsers have stopped autofilling elements with autocomplete=»new-password» for this very reason. For example, Firefox version 67 (see Firefox bug 1119063) stopped autofilling in this case; however, Firefox 70 (see Firefox bug 1565407) can suggest securely-generated passwords, but does not autofill a saved password. See the autocomplete compat table (en-US) for more details.

Tools for disabling autocompletion

The jquery.disableAutoFill plugin randomizes an input’s name attribute by default. When the form is submitted, the plugin restores the original name. This prevents auto-completion for all browsers (includes third-party auto-completion extensions) but doesn’t necessarily help with login fields.

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

This page was last modified on 27 нояб. 2023 г. by MDN contributors.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *