Убрать автозаполнение input html

Атрибут autocomplete

Как не тратить время на заполнения форм? Доверить всё компьютеру!

Время чтения: меньше 5 мин

1. Кратко
2. Пример
3. Как понять
4. Как пишется
   1. Включение и выключение автозаполнения
   2. Авторизация
   3. Формы имени
   4. Данные банковской карты и деньги
   5. Личные данные
   6. Адрес
   7. Телефон
   8. Ссылки
   1. Лена Райан советует

   Обновлено 20 декабря 2021

   Кратко

   Скопировать ссылку «Кратко» Скопировано

   Атрибут, при помощи которого форма заполняется в один клик — браузер подставит значения в соответствующие поля.

   Пример

   Скопировать ссылку «Пример» Скопировано

   Создадим форму, в которую пользователь будет сам вводить имя, а при заполнении поля e-mail сможет выбрать адрес почты из предложенных браузером вариантов:

       Введите имя  Электронная почта Отправить  form action=""> div> label for="name">Введите имяlabel> input id="name" type="text"> div> div> label for="email">Электронная почтаlabel> input id="email" type="email" autocomplete="on"> div> button type="submit">Отправитьbutton> form>    Скопировать Скопировано Не удалось скопировать   

   Как понять

   Скопировать ссылку «Как понять» Скопировано

   Когда вы заполняете формы, браузер сохраняет те или иные данные — логины, пароли, адреса и e-mail. При заполнении очередной формы браузер идёт в список сохранённой информации, выуживает оттуда данные, которые требуются для этой формы, и вставляет в соответствующие поля.

   Как пишется

   Скопировать ссылку «Как пишется» Скопировано

    
   .
     form autocomplete="on">. form>    Скопировать Скопировано Не удалось скопировать   

   Атрибут autocomplete пишется внутри открывающего тега, и в кавычках прописывается его значение.

   В зависимости от значения атрибута autocomplete , будут подставляться данные разного типа. Ниже приведены возможные значения.

   Включение и выключение автозаполнения

   Скопировать ссылку «Включение и выключение автозаполнения» Скопировано

   Авторизация

   Скопировать ссылку «Авторизация» Скопировано

   • nickname — никнейм.
   • username — имя пользователя или название аккаунта.
   • email — адрес электронной почты.
   • current — password — текущий пароль пользователя.
   • new — password — новый пароль.
   • one — time — code — одноразовый код для верификации пользователя.

   Формы имени

   Скопировать ссылку «Формы имени» Скопировано

   • name — полное имя.
   • given — name — имя (в странах, где дают два имени, это первое имя).
   • additional — name — второе имя (для стран, где дают два имени).
   • family — name — фамилия.
   • honorific — prefix — звание или префикс для обращения, например, «Mrs.», «Mr.», «Miss», «Ms.», «Dr.», «Mlle.».
   • honorific — suffix — окончание имени, например, «Jr.», «B.Sc.», «PhD.», «IV», «мл.».

   Данные банковской карты и деньги

   Скопировать ссылку «Данные банковской карты и деньги» Скопировано

   • cc — given — name — имя (в странах, где дают два имени, это первое имя), как на банковской карте.
   • cc — additional — name — второе имя, как на банковской карте (для стран, где дают два имени).
   • cc — family — name — фамилия, как на банковской карте.
   • cc — name — полное имя в том виде, как оно указано на банковской карте.
   • cc — csc — код безопасности (три цифры на обороте карты).
   • cc — exp — месяц и год окончания срока действия карты.
   • cc — exp — month — месяц окончания срока действия карты.
   • cc — exp — year — год окончания срока действия карты.
   • cc — number — номер банковской карты или счёта.
   • cc — type — платёжная система.
   • transaction — amount — сумма перевода.
   • transaction — currency — валюта перевода.

   Личные данные

   Скопировать ссылку «Личные данные» Скопировано

   • bday — полная дата рождения.
   • bday — day — день рождения (число).
   • bday — month — месяц рождения.
   • bday — year — год рождения.
   • language — язык в формате языкового тега из списка BCP 47.
   • sex — пол или гендер.
   • organization — название организации.
   • organization — title — профессия или должность в организации.
   • photo — url-адрес изображения.

   Адрес

   Скопировать ссылку «Адрес» Скопировано

   • address — level1 — административная единица первого уровня. Обычно это название области, региона или штата.
   • address — level2 — административная единица второго уровня. В странах с двумя уровнями это чаще всего название населённого пункта.
   • address — level3 — административная единица третьего уровня.
   • address — level4 — административная единица четвёртого уровня, если адрес её содержит.
   • address — line1 , address — line2 , address — line3 — отдельные строки для адресов, которые используются, если нет поля со значением street — address .
   • country — код страны.
   • country — name — страна.
   • street — address — адрес, начиная с улицы. Не должен содержать название города, страны и индекс.
   • postal — code — почтовый индекс.

   Телефон

   Скопировать ссылку «Телефон» Скопировано

   • tel — полный номер телефона, включая код страны.
   • tel — area — code — телефонный код региона страны.
   • tel — country — code — телефонный код страны.
   • tel — extension — добавочный номер.
   • tel — local — номер телефона без кодов страны и региона.
   • tel — local — prefix — номер локальной АТС.
   • tel — local — suffix — номер абонента внутри сети АТС.
   • tel — national — номер телефона без кода страны.

   Ссылки

   Скопировать ссылку «Ссылки» Скопировано

   Подсказки

   Скопировать ссылку «Подсказки» Скопировано

   💡 Автозаполнение может быть отключено в настройках браузера.

   💡 Если автозаполнение не отключено в браузере и атрибут autocomplete не прописан в теге, то его значение по умолчанию принимается за on .

   💡 Если задать autocomplete = «on» для , то это сработает для всех вложенных элементов формы.

   На практике

   Скопировать ссылку «На практике» Скопировано

   Лена Райан советует

   Скопировать ссылку «Лена Райан советует» Скопировано

   🛠 Значение атрибута может перебиваться значениями, прописанными в дочерних элементах.

       Введите имя  Электронная почта Отправить  form action="" autocomplete="off"> div> label for="name">Введите имяlabel> input id="name" type="text"> div> div> label for="email">Электронная почтаlabel> input id="email" type="email" autocomplete="on"> div> button type="submit">Отправитьbutton> form>    Скопировать Скопировано Не удалось скопировать   

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

   🛠 Для правильного автозаполнения желательно, чтобы:

   • у элементов , и были прописаны атрибуты name или id ;
   • они были обёрнуты в тег ;
   • сама форма имела кнопку отправки — или с атрибутом type = «submit» .

   🛠 Если пользователь должен ввести имя, рекомендуется использовать значение autocomplete = «name» вместо разделения на поля с отдельными частями имени, потому что имена могут иметь совершенно разную структуру.

   🛠 По той же причине рекомендуется использовать значение autocomplete = «cc — name» , если нужно вводить данные банковской карты.

   🛠 При создании нового аккаунта или изменении пароля следует использовать autocomplete = «new — password» для полей «Введите новый пароль» и «Подтвердите новый пароль», но не для поля «Введите текущий пароль». Это сделано, чтобы случайно не вписать существующий пароль, а также предложить помощь в создании безопасного пароля.

   Источник

   How to turn off form autocompletion

   This article explains how a website can disable autocomplete for form fields.

   These features are usually enabled by default, but they can be a privacy concern for users, so browsers can let users disable them. However, some data submitted in forms either are not useful in the future (for example, a one-time pin) or contain sensitive information (for example, a unique government identifier or credit card security code). As website author, you might prefer that the browser not remember the values for such fields, even if the browser’s autocomplete feature is enabled.

   Note that the WCAG 2.1 Success Criterion 1.3.5: Identify Input Purpose does not require that autocomplete/autofill actually work — merely that form fields that relate to specific personal user information are programmatically identified. This means that the criterion can be passed (by adding the relevant autocomplete attributes to individual form fields) even when autocompletion for the form itself has been turned off.

   Disabling autocompletion

   To disable autocompletion in forms, you can set the autocomplete 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:

   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 for more details.

   Found a content problem with this page?

   This page was last modified on Jul 4, 2023 by MDN contributors.

   Источник

   Как отключить автозаполнение форм с помощью html 5?

   Ничего не получается. На поле всё равно срабатывает авто заполнение.
   Что я делаю не так?

   

   UPD.

   Оценить 1 комментарий

   

   

   Миржалол Мирхомитов, Гениально! 04.09.2021 всё работает.
   chrome Версия 92.0.4515.159 (Официальная сборка), (64 бит)
   такие дела))

   

   14.10.2021. Chrome Версия 94.0.4606.81 (Официальная сборка), (64 бит) до сих пор работает)

   

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

   здесь мы отключаем автозаполнение пароля, а также чтобы не было выпадающего списка выбором паролей там где это не нужно:
   — оборачиваем форму в блок со свойством position:relative
   — после поля прописываем блок с position:absolute top:0 left:0 width:100% height:100%
   — создаем событие onclick, для класса field где вызываем фокус для нашего поля внутри

   

   До

   

   После

   Евгений Коелсник, akb2.
   Можете подсказать, пж?
   Я не совсем понял как нужно сделать, чтобы не было выпадающего списка выбором паролей.

   

   Можно отключить автозаполнение, если в момент фокусировки в поле поменять у поля значение name на произвольное. А когда пользователь выходит из input, то поменять значение name обратно. В этом случае браузер Хром не выводит подсказок, т.к. каждый раз значение name новое.
   Необходимо подключать jquery, а ниже подключить сам скрипт.

   Исходник (взял отсюда только код, который генерит значение name) https://github.com/terrylinooo/jquery.disableAutoFill

   Это сама форма, показываю кусок формы, с полями ввода, для которых отключаю подсказки хрома. Оба инпута имеют класс «only-ru»:

   Сам скрипт, который при фокусе генерит произвольное значение для name, а при выходе из фокуса — возвращает значение name обратно, как мне нужно. Можете его улучить, сделать более универсальным:

   //поменять name при фокусе $('.only-ru').on("focus", function()< var realFields = []; var realFieldsMapper = <>; $(this).each(function(i) < realFields[i] = $(this).attr('name'); if(realFieldsMapper[realFields[i]]) < $(this).attr('name', realFieldsMapper[realFields[i]]); >else < var randomName = Math.random().toString(36).replace(/[^a-z]+/g, ''); $(this).attr('name', randomName); realFieldsMapper[realFields[i]] = randomName; >>); >); //поменять name обратно $(document).mouseup(function (e)< var div1 = $("#city1"), div2 = $("#city2"); if (!div1.is(e.target)) $("input#city1").attr('name', 'city1'); if (!div2.is(e.target)) $("input#city2").attr('name', 'city2'); >);

   Источник

   Читайте также:  Тег input, атрибут type