Как работает автоматическое заполнение формы в браузере?
Как формируется автозаполнение работа в современных веб-браузерах? Какие наиболее распространенные методы используются в браузерах, реализующих автоматическое заполнение форм?
-- EDIT --
вопрос не в автозаполнении, а в автозаполнении формы, которая заботится не только о ранее введенных значениях, но и считает значение и структуру поля завершенными. Реализация Google Chrome, например,пытается проанализировать введенные поля угадать их тип и структуру. Или, по крайней мере, это то, что я понял из кода, указанному выше.
4 ответов
взгляните на ответ по kmote.
Выделите, что браузер смотрит на поле name
tag и делает обоснованное предположение о том, какие данные будут там (regex matching-хороший наивный способ сделать это). Chrome работает, чтобы получить какую-то стандартизацию, так что это не совсем так, как хит-или-промах.
различные технологии и браузеры используют различные методы для расчета того, что отображать, а также как они отображают его, но некоторые источники для проверки:
- Google общее описание
- как реализовать С jQuery (обратите внимание, что есть автозаполнение jQuery плагин так же).
Если вы хотите реализовать его (или просто использовать его) самостоятельно, я бы очень рекомендуем взглянуть на плагин.
первый элемент ответа-это просто нестандартная HTML-форма autocomplete
атрибут, который был представлен в Internet Explorer несколько лет назад.
по иронии судьбы, вы можете прочитать хорошую историю введение на сайте mozilla здесь:атрибут автозаполнения и веб-документы с помощью XHTML
этот вопрос довольно старый, но у меня есть обновленный ответ на 2017!
для того, чтобы вызвать автозаполнение, все, что вам нужно сделать, это назвать его правильно.
следующий ответ из моего первоначального ответа отсюда:https://stackoverflow.com/a/41965106/1696153
Google написал очень хороший гид для разработки веб-приложений, дружественных для мобильных устройств. У них есть раздел о том, как назвать входные данные в формах, чтобы легко использовать автозаполнение. Хотя это написано для мобильных устройств, это относится как к настольным, так и к мобильным!
Как включить автозаполнение в HTML-формах
вот некоторые ключевые моменты о том, как включить автозаполнение:
- использовать
<label>
для всех<input>
поля -
добавить
autocomplete
атрибут на<input>
теги и заполните его с помощью этого руководство. - имя
name
иautocomplete
атрибуты правильно для всех<input>
теги -
пример:
<label for="frmNameA">Name</label> <input type="text" name="name" id="frmNameA" placeholder="Full name" required autocomplete="name"> <label for="frmEmailA">Email</label> <input type="email" name="email" id="frmEmailA" placeholder="name@example.com" required autocomplete="email"> <!-- note that "emailC" will not be autocompleted --> <label for="frmEmailC">Confirm Email</label> <input type="email" name="emailC" id="frmEmailC" placeholder="name@example.com" required autocomplete="email"> <label for="frmPhoneNumA">Phone</label> <input type="tel" name="phone" id="frmPhoneNumA" placeholder="+1-555-555-1212" required autocomplete="tel">
имя <input>
теги
для запуска автозаполнения убедитесь, что вы правильно назвали name
и autocomplete
атрибуты <input>
теги. Это автоматически позволит выполнить автозаполнение в формах. Убедитесь, что также есть <label>
! Эту информацию также можно найти здесь.
вот как назвать ваши входы:
-
имя
- использовать любой из них для
name
:name fname mname lname
- использовать любой из них для
autocomplete
:-
name
(полное имя) -
given-name
(имя) -
additional-name
(для отчества) -
family-name
(по фамилия)
-
- пример:
<input type="text" name="fname" autocomplete="given-name">
- использовать любой из них для
-
электронная почта
- использовать любой из них для
name
:email
- используйте любой из эти
autocomplete
:email
- пример:
<input type="text" name="email" autocomplete="email">
- использовать любой из них для
-
адрес
- использовать любой из них для
name
:address city region province state zip zip2 postal country
- использовать любой из них для
autocomplete
:- для ввода одного адреса:
street-address
- для двух адресов входной:
address-line1
address-line2
-
address-level1
(штат или провинция) -
address-level2
(город) -
postal-code
(zip код) country
- для ввода одного адреса:
- использовать любой из них для
-
телефон
- использовать любой из них для
name
:phone mobile country-code area-code exchange suffix ext
- использовать любой из них для
autocomplete
:tel
- использовать любой из них для
-
Кредитной Карты
- использовать любой из них для
name
:ccname cardnumber cvc ccmonth ccyear exp-date card-type
- использовать любой из них для
autocomplete
:cc-name
cc-number
cc-csc
cc-exp-month
cc-exp-year
cc-exp
cc-type
- использовать любой из них для
-
Логинов
- использовать любой из них для
name
:username
- использовать любой из них для
autocomplete
:username
- использовать любой из них для
-
пароль
- использовать любой из них для
name
:password
- использовать любой из них для
autocomplete
:-
current-password
(для регистрационных форм) -
new-password
(для форм регистрации и смены пароля)
-
- использовать любой из них для
ресурсы
- текущий стандарт HTML WHATWG для автозаполнения.
- "создание удивительных форм" из Google. Кажется, обновляется почти ежедневно. Отличное чтение.
- "помощь пользователям оформить заказ быстрее с автозаполнением" от Google в 2015 году.