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

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

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

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

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

Ответ 1

Есть куча вещей, которые можно "ожидать" (например, в RFC3106 или формат hCard), но в конце концов это сводится к тому, что вы можете найти в Chromium источник code, я думаю.

Этот конкретный раздел, который кажется Chromium AutoFill implementation, вероятно, представляет для вас интерес, который я нашел с помощью Функция поиска Google для Chromium теперь доступна через Хостинг проектов Google Code.

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

Ответ 2

Похоже, что 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" />

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

Ответ 3

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

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

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

Следующий ответ из моего первоначального ответа отсюда: fooobar.com/info/40163/...

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

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

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

  • Используйте <label> для всех ваших полей <input>
  • Добавить атрибут autocomplete в теги <input> и заполнить его с помощью этого guide.
  • Назовите свои атрибуты 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="[email protected]" required autocomplete="email">
    
    <!-- note that "emailC" will not be autocompleted -->
    <label for="frmEmailC">Confirm Email</label>
    <input type="email" name="emailC" id="frmEmailC"
    placeholder="[email protected]" 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">
  • Email
    • Используйте любой из них для 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 (для форм регистрации и изменения пароля)

Ресурсы