Какие атрибуты ожидает автозаполнение Chrome?

Question

Я надеялся связать наш сайт с автозаполнением адреса Chrome, но я не могу найти ссылку на то, как он ожидает, что формы будут представлены.в поле name = полей форм, но вместо реинжиниринга было бы неплохо иметь хорошую ссылку.

В настоящий момент Chrome не заполняет ни одну из наших форм, но Safari заполняет большинство из них.Есть риск задать два вопроса одновременно: кто-нибудь тоже получил ссылку на сафари?Safari, кажется, использует наши title = fields ...

Он не использует этот стандарт, не так ли?http://www.ietf.org/rfc/rfc3106.txt

Answer 1

Есть куча вещей, которые можно «ожидать» (например, вещи в RFC3106 или hCard формате ), но в итоге все сводится к тому, что вы можете найти в Хром источник код , я думаю.

Этот конкретный раздел, который, по-видимому, Реализация автозаполнения Chromium , вероятно, представляет интерес для вас, что я обнаружил с помощью функции Поиск кода Google для Chromium теперь доступно через Google Code Project Hosting .

Некоторые из констант ex-ed , используемые для регулярных выражений, определены в autofill_regex_constants.h и представлены в довольно обширном списке (даже с поддержкой I18N!) В autofill_regex_constants.cc.utf8.

Answer 2

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

Теперь есть полная документация о том, как вызвать автозаполнение.

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

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

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

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

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

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

Как назвать <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 году.

Answer 3

Похоже, что Chrome (v51.0) реализует следующую спецификацию: https://html.spec.whatwg.org/multipage/forms.html#autofill

Это означает, что вы можете заполнить атрибут autocomplete определенными типами значений, которые Chrome должен заполнить.

Примеры:

<input type="text" autocomplete="address-line1" id="a1" name="a1" />
<input type="text" autocomplete="address-line2" id="a2" name="a2" />
<input type="text" autocomplete="address-level2" id="city" name="city" />
<input type="text" autocomplete="address-level1" id="state" name="state" />
<input type="text" autocomplete="country-name" id="country" name="country" />

<input type="text" autocomplete="tel" id="phone" name="phone" />
<input type="text" autocomplete="email" id="email" name="email" />

(Очевидно, я пропустил ярлыки на примерах)