Как работает автоматическое заполнение формы в браузере?

Как формируется автозаполнение работа в современных веб-браузерах? Какие наиболее распространенные методы используются в браузерах, реализующих автоматическое заполнение форм?

-- EDIT --

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

4 ответов


взгляните на ответ по kmote.

Выделите, что браузер смотрит на поле name tag и делает обоснованное предположение о том, какие данные будут там (regex matching-хороший наивный способ сделать это). Chrome работает, чтобы получить какую-то стандартизацию, так что это не совсем так, как хит-или-промах.


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

Если вы хотите реализовать его (или просто использовать его) самостоятельно, я бы очень рекомендуем взглянуть на плагин.


первый элемент ответа-это просто нестандартная HTML-форма autocomplete атрибут, который был представлен в Internet Explorer несколько лет назад.

по иронии судьбы, вы можете прочитать хорошую историю введение на сайте mozilla здесь:атрибут автозаполнения и веб-документы с помощью XHTML


этот вопрос довольно старый, но у меня есть обновленный ответ на 2017!

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

следующий ответ из моего первоначального ответа отсюда:https://stackoverflow.com/a/41965106/1696153

вот ссылка на официальный текущая WHATWG как средство HTML-код Стандарт для включения автозаполнения.

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 (для форм регистрации и смены пароля)

ресурсы