{"draftJsState":{"blocks":[{"data":{"image":{"id":"619416d67d64510e94f18e73"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"3amb9"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":22,"offset":10}],"inlineStyleRanges":[],"text":"Источник: Nuances of Programming","type":"unstyled","key":"8q1nk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":25,"offset":0,"style":"BOLD"}],"text":"Что такое автозаполнение?","type":"header-three","key":"cbfbf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"При заполнении пользователем формы в интернете умница-браузер автоматически подставляет значения, основываясь на вводимых ранее аналогичных данных.","type":"unstyled","key":"4cs9c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":25,"offset":0,"style":"BOLD"}],"text":"Что такое автодополнение?","type":"header-three","key":"at9um"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"При заполнении пользователем формы в интернете смышлёный браузер показывает возможные значения, основываясь на вводимых ранее аналогичных данных. Так пользователь может выбрать и принять подсказанный вариант.","type":"unstyled","key":"7mu61"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Автозаполнение или автодополнение применяются к имени пользователя, паролю, номеру телефона, адресу, электронной почте, данным кредитной карты или любым другим произвольным полям.","type":"unstyled","key":"4hfkj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Отличия между автозаполнением и автодополнением незначительны. Бывает, что веб-сайт поддерживает выполнение обеих функций в одной форме. Например, он предлагает варианты автодополнения при вводе имени пользователя, и, как только оно подобрано, автоматически вставляет соответствующий пароль.","type":"unstyled","key":"cgcs3"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":17,"offset":49}],"inlineStyleRanges":[],"text":"Во многих ситуациях эти опции взаимозаменяемы. В спецификации HTML автозаполнение значится в официальной терминологии и предназначено для помощи пользователям в заполнении форм. С этой целью используется атрибут HTML autocomplete для подсказки браузеру, как предоставить такую возможность или стоит ли вообще это делать.","type":"unstyled","key":"el2t8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":42,"offset":0,"style":"BOLD"}],"text":"Зачем нужны автозаполнение/автодополнение?","type":"header-three","key":"dihvo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Эти функции помогают пользователям быстрее заполнять формы в интернете, особенно на мобильных устройствах. Для каждого веб-сайта рекомендуется создавать надежные и уникальные пароли. Как следствие, с запоминанием сложных из них возникают проблемы. Посредством автозаполнения/автодополнения браузеры запоминают информацию, а именно пароли, номера кредитных карт, адреса и т. д. Пользователю остается только решить, доверяет ли он средствам безопасности браузера.","type":"unstyled","key":"504cq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В статье мы подробно рассмотрим, как браузеры автоматически заполняют стандартные поля кредитных карт, адресов и паролей.","type":"unstyled","key":"cbbd0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Подключение/отключение автозаполнения","type":"header-three","key":"cqldq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"autocomplete — это атрибут

, указывающий на то, может ли браузер автоматически дополнять значение элемента управления. У автодополнения есть два основных значения:","type":"unstyled","key":"4edds"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"on: Браузеру разрешается предлагать или дополнять значение на основе ранее введенных вариантов. Он должен применить эвристику для выборки предлагаемых значений автодополнения. on — значение по умолчанию.","type":"unordered-list-item","key":"67rmv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"off: Браузер не завершает ввод данных автоматически. Вместо этого пользователь каждый раз сам вводит значение в поле. Как правило, это означает, что информация слишком конфиденциальная и не подлежит кэшированию, или значение не предназначено для повторного использования, или приложение предоставляет собственный механизм автодополнения.","type":"unordered-list-item","key":"6v34q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Поля ввода с автозаполнением","type":"header-three","key":"4alls"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Атрибут autocomplete можно установить на уровне для управления полями ввода или отдельно для каждого из них. Эти поля определяются элементами ,

и <select>.","type":"unstyled","key":"6fhre"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ниже представлен код <input>, выполняющийся в VSCode Live Server:","type":"unstyled","key":"4088q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"<!DOCTYPE html>\n<html>\n\n<body style=\"margin: 20px\">\n  <form>\n    <input />\n  </form>\n</body>\n\n</html>","type":"unstyled","key":"edmpf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В браузере появляется поле ввода:","type":"unstyled","key":"frkui"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Почему же поле автоматически не заполняется, при том что значением по умолчанию является on?","type":"unstyled","key":"cdii"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":48,"style":"ITALIC"}],"text":"Для того чтобы функция autocomplete заработала, как правило, требуется соблюдение трех условий:","type":"unstyled","key":"76kr1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"У элементов <input>/<select>/<textarea> присутствуют атрибуты name и/или id.","type":"unordered-list-item","key":"ci6i7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Элементы <input>/<select>/<textarea> являются потомками элемента <form>.","type":"unordered-list-item","key":"6mkpp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"У формы имеется кнопка отправки.","type":"unordered-list-item","key":"7m7ft"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Оговорка “как правило” была употреблена не случайно, поскольку в разных браузерах процедуры автозаполнения немного отличаются. Для обеспечения работы эвристики браузера рекомендованы и name, и id .","type":"unstyled","key":"9d8r9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Изменим код HTML, чтобы привести его в соответствие с требованиями:","type":"unstyled","key":"57dv9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"<!DOCTYPE html>\n<html>\n\n<body style=\"margin: 20px\">\n  <form>\n    <input name=\"my-input\" id=\"my-input\" />\n    <input type=\"submit\" />\n  </form>\n</body>\n\n</html>","type":"unstyled","key":"c2qga"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В строке 6 установлены и name, и id, хотя в данном случае это не обязательно.","type":"unstyled","key":"88o62"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В строке 7 добавлена кнопка отправки.","type":"unstyled","key":"6kfoi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Выполняем код. Вводим a и отправляем форму.","type":"unstyled","key":"cqum4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Еще раз выполняем код. При нажатии на поле в качестве предлагаемого варианта появляется предыдущий ввод a.","type":"unstyled","key":"fv574"},{"data":{"image":{"id":"619416c3528dda03d32417e5"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"5gj48"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для <input> атрибут autocomplete работает с типами hidden, text, search, url, tel, email, date, month, week, time, datetime-local, number, range, color и password. А вот с checkbox, radio, file или типами кнопок, которые не возвращают числовые или текстовые данные, он не действует.","type":"unstyled","key":"13dep"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как насчет <textarea>?","type":"unstyled","key":"9l3a9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Он должен работать аналогично <input>. Однако в браузерах такие реализации встречаются не часто.","type":"unstyled","key":"bpa3q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"А что по поводу <select>?","type":"unstyled","key":"8heu1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В спецификации приводится пример, показывающий предыдущий выбор, Zambia, в качестве первоочередного варианта.","type":"unstyled","key":"ck9uh"},{"data":{"image":{"id":"619416c3b9c14d121d500d19"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"aqnfd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Однако в браузерах такие реализации тоже встречаются не часто.","type":"unstyled","key":"a9hhj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В большинстве случаев функция автозаполнения работает для элементов <input>.","type":"unstyled","key":"f6nsj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Токены автозаполнения","type":"header-three","key":"4gntc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":49,"offset":119,"style":"ITALIC"}],"text":"Когда autocomplete для поля ввода установлен, помимо \"on\" и \"off\" он может принимать и другие значения. Они называются токенами автозаполнения (autofill detail token), представляющими из себя упорядоченный набор токенов, разделенных пробелами и определяемых следующим образом:","type":"unstyled","key":"2lijf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"[section-](optional) [shipping|billing](optional) [home|work|mobile|fax|pager](optional) [autofill field name]","type":"unstyled","key":"5f582"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как правило, имя поля автозаполнения представляет собой одно из следующих значений:","type":"unstyled","key":"7vidi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\"name\"\n\"honorific-prefix\"\n\"given-name\"\n\"additional-name\"\n\"family-name\"\n\"honorific-suffix\"\n\"nickname\"\n\"username\"\n\"new-password\"\n\"current-password\"\n\"one-time-code\"\n\"organization-title\"\n\"organization\"\n\"street-address\"\n\"address-line1\"\n\"address-line2\"\n\"address-line3\"\n\"address-level4\"\n\"address-level3\"\n\"address-level2\"\n\"address-level1\"\n\"country\"\n\"country-name\"\n\"postal-code\"\n\"cc-name\"\n\"cc-given-name\"\n\"cc-additional-name\"\n\"cc-family-name\"\n\"cc-number\"\n\"cc-exp\"\n\"cc-exp-month\"\n\"cc-exp-year\"\n\"cc-csc\"\n\"cc-type\"\n\"transaction-currency\"\n\"transaction-amount\"\n\"language\"\n\"bday\"\n\"bday-day\"\n\"bday-month\"\n\"bday-year\"\n\"sex\"\n\"url\"\n\"photo\"","type":"unstyled","key":"1d5ok"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Помимо говорящих имен полей в списке присутствуют \"cc\" и \"bday\", означающие соответственно кредитную карту и день рождения.","type":"unstyled","key":"ef6ml"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Обратимся к примерам:","type":"unstyled","key":"5r4t3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"section-blue shipping home street-address\nshipping home street-address\nhome street-address\nstreet-address","type":"unstyled","key":"6gp4n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Токен автозаполнения определяет ожидаемое значение, на основании которого браузеру разрешается предоставлять возможные варианты, хотя это и не является строгим для него обязательством.","type":"unstyled","key":"fcoat"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Рассмотрим следующий пример:","type":"unstyled","key":"ejp56"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"<!DOCTYPE html>\n<html>\n\n<body style=\"margin: 20px\">\n  <form>\n    <input name=\"my-input\" id=\"my-input\" autocomplete=\"name\" />\n    <input type=\"submit\" />\n  </form>\n</body>\n\n</html>","type":"unstyled","key":"1oik"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"autocomplete=\"name\" в строке 6 никак не отразилось на поле ввода:","type":"unstyled","key":"67o4r"},{"data":{"image":{"id":"619416c3b74957703e91897b"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"2u45s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Будет лучше, если мы определим name и/или id.","type":"unstyled","key":"ip5m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"<!DOCTYPE html>\n<html>\n\n<body style=\"margin: 20px\">\n  <form>\n    <input name=\"name\" id=\"name\" autocomplete=\"name\" />\n    <input type=\"submit\" />\n  </form>\n</body>\n\n</html>","type":"unstyled","key":"1vchg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"После того как мы установили значение \"name\" для name и/или id, браузер предлагает уже содержательные варианты.","type":"unstyled","key":"4prhg"},{"data":{"image":{"id":"619416c3d42a1501b403118e"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"86p15"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Автозаполнение паролей, данных кредитной карты, адресов","type":"header-three","key":"2ocdr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Далее примером нам послужит Chrome. В других браузерах аналогичные действия выполняются несколько иным образом.","type":"unstyled","key":"dnbsa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ниже представлены настройки автозаполнения в Chrome: chrome://settings/autofill.","type":"unstyled","key":"dfkm4"},{"data":{"image":{"id":"619416c33ff76a3efb78b794"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"858ll"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"На скриншоте отображены три типа автозаполнения: Passwords, Payment methods и Addresses and more.","type":"unstyled","key":"cc92f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Рассмотрим их поочередно.","type":"unstyled","key":"439a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":20,"offset":0,"style":"BOLD"}],"text":"Поля кредитной карты","type":"unstyled","key":"5eetb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Переходим в настройки автозаполнения платежей в Chrome: chrome://settings/payments.","type":"unstyled","key":"es1o9"},{"data":{"image":{"id":"619416c3528dda03d32417e6"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"8dejc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"На скриншоте предлагаются два варианта: 1) Сохранять и автоматически заполнять платежные данные (Save and fill payment methods); 2) Разрешать сайтам проверять наличие сохраненных способов оплаты (Allow sites to check if you have payment methods saved).","type":"unstyled","key":"bbjhh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Добавляем платежные данные:","type":"unstyled","key":"7bkl4"},{"data":{"image":{"id":"619416c5e1ffd25eeb0c5d42"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"8f0b8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Выполняем следующий код на localhost.","type":"unstyled","key":"odj7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"<!DOCTYPE html>\n<html>\n\n<body style=\"margin: 20px\">\n  <form>\n    <input name=\"cc-name\" id=\"cc-name\" autocomplete=\"cc-name\" />\n    <input name=\"cc-number\" id=\"cc-number\" autocomplete=\"cc-number\" />\n    <input name=\"cc-exp\" id=\"cc-exp\" autocomplete=\"cc-exp\" />\n    <input type=\"submit\" />\n  </form>\n</body>\n\n</html>","type":"unstyled","key":"dtmh5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В строках 6, 7 и 8 у каждого поля ввода есть атрибуты name, id и autocomplete. Для автозаполнения данных кредитной карты достаточно одного из них.","type":"unstyled","key":"4ibdt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"На localhost появляется уведомление об отключении функции автозаполнения кредитной карты, поскольку данная форма не использует безопасное соединение:","type":"unstyled","key":"8kjka"},{"data":{"image":{"id":"619416c57d64510e94f1852e"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"amglo"},{"data":{},"depth":0,"entityRanges":[{"key":2,"length":5,"offset":14}],"inlineStyleRanges":[],"text":"Устанавливаем surge для публикации HTML-кода:","type":"unstyled","key":"f1aej"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"$ npm install --global surge\n$ surge\nproject: /Users/jenniferfu/form/\n         domain: white-book.surge.sh\n         upload: [====================] 100% eta: 0.0s (1 files, 432 bytes)\n            CDN: [====================] 100%\n     encryption: *.surge.sh, surge.sh (275 days)\n             IP: 138.197.235.123Success! - Published to white-book.surge.sh","type":"unstyled","key":"e9mud"},{"data":{},"depth":0,"entityRanges":[{"key":3,"length":19,"offset":7}],"inlineStyleRanges":[],"text":"Вводим white-book.surge.sh в URL, после чего в нашем примере происходит автозаполнение данных кредитной карты.","type":"unstyled","key":"1vvt0"},{"data":{"image":{"id":"619416c5a323487047982908"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"95m74"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Выбираем данные кредитной карты, и имя владельца, номер и срок действия заполняются автоматически.","type":"unstyled","key":"f3vm2"},{"data":{"image":{"id":"619416c55cbe63727a1895d2"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"7mq2q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":0,"style":"BOLD"}],"text":"Поля адреса","type":"unstyled","key":"emi7s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Переходим в настройки автозаполнения адреса в Chrome: chrome://settings/addresses.","type":"unstyled","key":"7aahb"},{"data":{"image":{"id":"619416c5e1ffd25eeb0c5d9b"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"a79dg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как видно на скриншоте, пользователю предлагается выбрать опцию Сохранять и автоматически заполнять адреса (Save and fill addresses).","type":"unstyled","key":"cjses"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Добавляем адрес:","type":"unstyled","key":"fomph"},{"data":{"image":{"id":"619416c6e1ffd25eeb0c5d9c"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"84vlb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Выполняем код на localhost:","type":"unstyled","key":"3og2o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"<!DOCTYPE html>\n<html>\n\n<body style=\"margin: 20px\">\n  <form>\n    <input name=\"name\" id=\"name\" autocomplete=\"name\" />\n    <input name=\"organization\" id=\"organization\" autocomplete=\"organization\" />\n    <br />\n    <input name=\"ship-street-address\" id=\"ship-street-address\" autocomplete=\"shipping street-address\" />\n    <input name=\"ship-city\" id=\"ship-city\" autocomplete=\"shipping locality\" />\n    <input name=\"ship-state\" id=\"ship-state\" autocomplete=\"shipping region\" />\n    <input name=\"ship-zip\" id=\"ship-zip\" autocomplete=\"shipping postal-code\" />\n    <br />\n    <input name=\"ship-country\" id=\"ship-country\" autocomplete=\"shipping country\" />\n    <br />\n    <input type=\"submit\" />\n  </form>\n</body>\n\n</html>","type":"unstyled","key":"9sjjo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для строк 9, 10, 11, 12 и 14 задействуем токен shipping. Как вы могли заметить, locality и region не являются частями имен автозаполнения полей  —  это реализации Chrome.","type":"unstyled","key":"e679e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Автозаполнение адреса успешно работает на localhost.","type":"unstyled","key":"2950i"},{"data":{"image":{"id":"619416c68092871e6cd11296"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"5be27"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Выбираем сведения об адресе, после чего поля имени, организации и адреса заполняются автоматически.","type":"unstyled","key":"71k2"},{"data":{"image":{"id":"619416c6528dda03d3241972"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"5fjtu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":0,"style":"BOLD"}],"text":"Поля пароля","type":"unstyled","key":"b0flb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Переходим в настройки автозаполнения паролей в Chrome: chrome://settings/passwords.","type":"unstyled","key":"47eap"},{"data":{"image":{"id":"619416c7a3234870479829e3"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"80erm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как видим на скриншоте, пользователю предлагается выбрать: Предлагать сохранение паролей (Offer to save passwords) и Автоматический вход (Auto Sign-in).","type":"unstyled","key":"2671h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для автозаполнения паролей существует три параметра, а именно website, username и password, указанные в нижней части скриншота. website управляется браузером, а username и password настраиваются кодом. В зависимости от вида хоста, будь то localhost, хост типа surge или обычное доменное имя, браузеры действуют по-разному. Он может проигнорировать настройки пароля, или предоставить значок ключа в адресной строке для ручного сохранения пароля, или для этой же цели автоматически вывести диалоговое окно.","type":"unstyled","key":"5qsjt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Следующий код автоматически заполняет поля имени пользователя и пароля:","type":"unstyled","key":"fc5ff"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"<!DOCTYPE html>\n<html>\n\n<body style=\"margin: 20px\">\n  <form>\n    <input name=\"username\" id=\"username\" />\n    <input type=\"password\" id=\"password\" />\n  <input type=\"submit\" />\n  </form>\n</body>\n\n</html>","type":"unstyled","key":"kgil"},{"data":{},"depth":0,"entityRanges":[{"key":4,"length":22,"offset":19}],"inlineStyleRanges":[],"text":"Код публикуется на quaint-garden.surge.sh. Вводим имя пользователя и пароль.","type":"unstyled","key":"flu4u"},{"data":{"image":{"id":"619416c721deaa2977f9759e"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"368j3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Нажимаем на значок ключа сверху над адресной строкой, после чего всплывает диалоговое окно для сохранения пароля. Нажимаем Save.","type":"unstyled","key":"5f4m5"},{"data":{"image":{"id":"619416c8b9c14d121d500f25"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"f7m1t"},{"data":{},"depth":0,"entityRanges":[{"key":5,"length":22,"offset":40}],"inlineStyleRanges":[],"text":"Код работает как на localhost, так и на quaint-garden.surge.sh. Сохраненные пароли отображаются в соответствующих настройках.","type":"unstyled","key":"chm2q"},{"data":{"image":{"id":"619416c821deaa2977f975cb"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"8t4fp"},{"data":{},"depth":0,"entityRanges":[{"key":6,"length":22,"offset":13}],"inlineStyleRanges":[],"text":"Переходим на quaint-garden.surge.sh  —  username и password автоматически заполняются.","type":"unstyled","key":"dg7r1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Отключает ли autocomplete=\"off\" автозаполнение пароля?","type":"unstyled","key":"5vd1k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"К сожалению, браузеры не поддерживают autocomplete=\"off\" для полей авторизации. Если на сайте задано autocomplete=\"off\" для <form> с полями username и password или непосредственно для полей username и password, то данная функция не отключается.","type":"unstyled","key":"7jc4d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для отключения автозаполнения пароля потребуется autocomplete=\"new-password\" для поля password.","type":"unstyled","key":"dr00r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"<!DOCTYPE html>\n<html>\n\n<body style=\"margin: 20px\">\n  <form autoComplete=\"off\">\n    <input name=\"username\" id=\"username\" />\n    <input type=\"password\" id=\"password\" autocomplete=\"new-password\" />\n    <input type=\"submit\" />\n  </form>\n</body>\n\n</html>","type":"unstyled","key":"88at4"},{"data":{},"depth":0,"entityRanges":[{"key":7,"length":22,"offset":19}],"inlineStyleRanges":[],"text":"Код публикуется на plastic-snail.surge.sh. Автозаполнение для username отключено. В поле password вас спросят, нужно ли повторно использовать ранее сохраненные комбинации username/password.","type":"unstyled","key":"76tt6"},{"data":{"image":{"id":"619416c8c801ae2508c8c8b1"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"1ap9h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Очистка данных автозаполнения","type":"header-three","key":"3c9ko"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Периодически возникает необходимость почистить данные автозаполнения. Для изменения его настроек или удаления сохраненных паролей, платежных данных и адресов переходим в chrome://settings/autofill.","type":"unstyled","key":"enndd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если необходимо очистить все данные, переходим в chrome://settings/?search=history и нажимаем на Clear browsing data.","type":"unstyled","key":"8omnq"},{"data":{"image":{"id":"619416c821deaa2977f975cd"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"fjdhr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Во вкладке Advanced выбираем Autofill form data и нажимаем Clear data.","type":"unstyled","key":"dcsqn"},{"data":{"image":{"id":"619416c9528dda03d3241b52"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"fqjs9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Все данные для автозаполнения удаляются.","type":"unstyled","key":"7vjvk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Возможно, потребуется перезапустить браузер для обновления состояния.","type":"unstyled","key":"774ar"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Заключение","type":"header-three","key":"2qbm4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Итак, из статьи вы узнали, что такое автозаполнение, как оно работает и как устанавливать его для стандартных полей, кредитных карт, адресов и паролей.","type":"unstyled","key":"aulkv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Освоение автозаполнения способствует созданию удобных для пользователя веб-приложения.","type":"unstyled","key":"ept56"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Благодарю за внимание. Надеюсь, информация была полезной.","type":"unstyled","key":"6auja"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Читайте также:","type":"unstyled","key":"aad6o"},{"data":{},"depth":0,"entityRanges":[{"key":8,"length":39,"offset":0}],"inlineStyleRanges":[],"text":"Как посещать сайты, не заходя в браузер","type":"unordered-list-item","key":"57o7d"},{"data":{},"depth":0,"entityRanges":[{"key":9,"length":39,"offset":0}],"inlineStyleRanges":[],"text":"Создание простого веб-скрейпера на Ruby","type":"unordered-list-item","key":"au6ps"},{"data":{},"depth":0,"entityRanges":[{"key":10,"length":66,"offset":0}],"inlineStyleRanges":[],"text":"Как с легкостью создавать формы на React с помощью react-hook-form","type":"unordered-list-item","key":"4ndtl"},{"data":{},"depth":0,"entityRanges":[{"key":11,"length":8,"offset":14},{"key":12,"length":2,"offset":24}],"inlineStyleRanges":[],"text":"Читайте нас в Telegram, VK","type":"unstyled","key":"47ga3"},{"data":{},"depth":0,"entityRanges":[{"key":13,"length":11,"offset":15},{"key":14,"length":38,"offset":28}],"inlineStyleRanges":[],"text":"Перевод статьи Jennifer Fu: 6 Autofill Features for Web Developers","type":"unstyled","key":"7rfrq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"MSaCkWzRIsuhPhXi9jeX"}],"entityMap":{"11":{"data":{"href":"https://t.me/nuancesprog","url":"https://t.me/nuancesprog"},"mutability":"MUTABLE","type":"LINK"},"12":{"data":{"href":"https://vk.com/nuancesprog","url":"https://vk.com/nuancesprog"},"mutability":"MUTABLE","type":"LINK"},"13":{"data":{"href":"https://jenniferfubook.medium.com/?source=post_page-----ac76b725b28a--------------------------------","url":"https://jenniferfubook.medium.com/?source=post_page-----ac76b725b28a--------------------------------"},"mutability":"MUTABLE","type":"LINK"},"14":{"data":{"href":"https://betterprogramming.pub/6-autofill-features-for-web-developers-ac76b725b28a","url":"https://betterprogramming.pub/6-autofill-features-for-web-developers-ac76b725b28a"},"mutability":"MUTABLE","type":"LINK"},"0":{"data":{"url":"https://nuancesprog.ru/p/14528/"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"href":"https://html.spec.whatwg.org/multipage/form-control-infrastructure.html","url":"https://html.spec.whatwg.org/multipage/form-control-infrastructure.html"},"mutability":"MUTABLE","type":"LINK"},"2":{"data":{"href":"https://surge.sh/","url":"https://surge.sh/"},"mutability":"MUTABLE","type":"LINK"},"3":{"data":{"href":"https://white-book.surge.sh","url":"https://white-book.surge.sh/"},"mutability":"MUTABLE","type":"LINK"},"4":{"data":{"href":"https://quaint-garden.surge.sh","url":"https://quaint-garden.surge.sh/"},"mutability":"MUTABLE","type":"LINK"},"5":{"data":{"href":"https://quaint-garden.surge.sh","url":"https://quaint-garden.surge.sh/"},"mutability":"MUTABLE","type":"LINK"},"6":{"data":{"href":"https://quaint-garden.surge.sh/","url":"https://quaint-garden.surge.sh/"},"mutability":"MUTABLE","type":"LINK"},"7":{"data":{"href":"https://plastic-snail.surge.sh","url":"https://plastic-snail.surge.sh/"},"mutability":"MUTABLE","type":"LINK"},"8":{"data":{"href":"https://nuancesprog.ru/p/14508/","url":"https://nuancesprog.ru/p/14508/"},"mutability":"MUTABLE","type":"LINK"},"9":{"data":{"href":"https://nuancesprog.ru/p/13692/","url":"https://nuancesprog.ru/p/13692/"},"mutability":"MUTABLE","type":"LINK"},"10":{"data":{"href":"https://nuancesprog.ru/p/13056/","url":"https://nuancesprog.ru/p/13056/"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}</article></body></html>