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

Question

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

- EDIT -

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

Answer 1

Посмотрите на этот ответ от kmote.

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

Answer 2

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

• Google's high-описание уровня
• Как реализовать его с помощью jQuery (обратите внимание, что есть автозаполнение jQuery плагин ).

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

Answer 3

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

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

Answer 4

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

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

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

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

Google написал довольно красивое руководство для разработки веб-приложений, удобных для мобильных устройств. У них есть раздел о том, как назвать входные данные в формах, чтобы легко использовать автозаполнение. Несмотря на то, что он написан для мобильных устройств, он применим как для настольных компьютеров, так и для мобильных устройств!

Как включить автозаполнение в HTML-формах

Вот несколько ключевых моментов, как включить автозаполнение:

• Используйте <label> для всех ваших <input> полей
• Добавьте атрибут autocomplete к тегам <input> и заполните его, используя guide .
• Назовите ваши атрибуты name и autocomplete правильно для всех <input> тегов

• * ** 1054 тысячи пятьдесят-три * Пример : * * тысяча пятьдесят-семь

  <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">
• E-mail
  • Используйте любой из них для 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 (почтовый индекс)
    • 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
• Usernames
  • Используйте любой из них для name: username
  • Используйте любой из них для autocomplete: username
• Пароли
  • Используйте любой из них для name: password
  • Используйте любой из них для autocomplete:
    • current-password (для форм входа)
    • new-password (для регистрации и смены пароля)

Ресурсы

• Текущий стандарт WHATWG HTML для автозаполнения.
• "Создайте удивительные формы" из Google . Кажется, будет обновляться почти ежедневно. Отличное чтение.
• «Помогите пользователям быстрее оформить заказ с помощью автозаполнения» от Google в 2015 году.