Как запустить автозаполнение в Google Chrome?

Я хотел бы знать, есть ли какая-то специальная разметка, чтобы включить функцию автозаполнения Chrome для конкретной формы. Я только задал вопросы о том, как отключить его, но я хотел бы знать, могу ли я добавить какую-то разметку в код html, чтобы сообщить браузеру "это вход для адреса" или "это почтовый индекс поле", чтобы правильно заполнить его (предполагается, что пользователь активировал эту функцию).

Ответ 1

ОБНОВЛЕНИЕ на 2017 год: похоже, что ответ от Кэти содержит больше актуальной информации, чем у меня. Будущие читатели: отдайте свой голос за этот ответ.

Это большой вопрос, и к нему трудно найти документацию. На самом деле, во многих случаях вы обнаружите, что функция автозаполнения Chrome "просто работает". Например, следующий фрагмент html создает форму, которая, по крайней мере для меня (Chrome v. 18), автоматически заполняется после нажатия в первом поле:

<!DOCTYPE html>
<html>
<body>    
<form method="post">
  First name:<input type="text" name="fname" /><br />
  Last name: <input type="text" name="lname" /><br />
  E-mail: <input type="text" name="email" /><br />
  Phone: <input type="text" name="phone" /><br />
  Address: <input type="text" name="address" /><br />
</form>
</body>
</html>

Однако этот ответ является неудовлетворительным, поскольку оставляет решение в сфере "магии". Углубившись вглубь, я узнал, что Chrome (и другие браузеры с автозаполнением) в первую очередь полагаются на контекстные подсказки для определения типа данных, которые должны быть заполнены в элементах формы. Примеры таких контекстных подсказок включают name элемента ввода, текст, окружающий элемент, и любой текст-заполнитель.

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

К сожалению, до сих пор веб-мастерам было трудно обеспечить, чтобы Chrome и другие поставщики форм могли правильно анализировать свою форму. Существуют некоторые стандарты; но они накладывают тяжелое бремя на реализацию веб-сайта, поэтому они практически не используются на практике.

("Стандарты", на которые они ссылаются, являются более поздней версией спецификации, упомянутой в ответе Avalanchis выше.)

Пост Google продолжает описывать предложенное ими решение (что встречается с серьезной критикой в комментариях к посту). Они предлагают использовать для этой цели новый атрибут:

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

<input type="text" name="field1" x-autocompletetype="email"/>

... где x- обозначает "экспериментальный" и будет удален, если и когда это станет стандартом. Прочтите этот пост для получения более подробной информации, или, если вы хотите глубже понять, вы найдете более полное объяснение предложения в вики-сайте whatwg.

ОБНОВЛЕНИЕ: Как указано в этих проницательных ответах, все регулярные выражения, которые Chrome использует для идентификации/распознавания общих полей, можно найти в autofill_regex_constants.cc.utf8. Поэтому, чтобы ответить на исходный вопрос, просто убедитесь, что имена ваших HTML-полей соответствуют этим выражениям. Вот некоторые примеры:

имя: "first.*name|initials|fname|first$" имя "first.*name|initials|fname|first$"
фамилия: "last.*name|lname|surname|last$|secondname|family.*name"
электронная почта: "e.?mail"
адрес (строка 1): "address.*line|address1|addr1|street"
почтовый индекс: "zip|postal|post.*code|pcode|^1z$"

Ответ 2

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

Здесь ссылка на документацию WHATWG для включения автозаполнения.

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="[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">
Эл. адрес
- Используйте любой из них для 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 году.

Ответ 3

Из моего тестирования тег x-autocomplete ничего не делает. Вместо этого используйте теги autocomplete на ваших входных тегах и задайте их значения в соответствии со спецификацией HTML здесь http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#autofill-field.

Пример:

<input name="fname" autocomplete="given-name" type="text" placeholder="First Name" required>

Тег родительской формы требует автозаполнения = "on" и method = "POST".

Ответ 4

Вам нужно правильно назвать элементы, чтобы браузер автоматически их заполнил.

Вот спецификация IETF для этого:

http://www.ietf.org/rfc/rfc3106.txt 1

Ответ 5

Похоже, мы получим больше контроля над этой функцией автозаполнения. В Chrome Canary появился новый экспериментальный API, который можно использовать для доступа к данным после запроса пользователю:

http://www.chromium.org/developers/using-requestautocomplete http://blog.alexmaccaw.com/requestautocomplete

Новая информация google:

http://googlewebmastercentral.blogspot.de/2015/03/helping-users-fill-out-online-forms.html

https://developers.google.com/web/fundamentals/input/form/label-and-name-inputs#use-metadata-to-enable-auto-complete

Ответ 6

Я просто играл в арку со спецификацией и получил хороший рабочий пример - в том числе еще несколько полей.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>

  <form autocomplete="on" method="POST">

    <fieldset>
        <legend>Ship the blue gift to...</legend>
        <p>
            <label> Firstname:
<input name="fname" autocomplete="section-blue shipping given-name" type="text"  required>
            </label>
      </p>
        <p>
            <label> Lastname:
<input name="fname" autocomplete="section-blue shipping family-name" type="text" required>
            </label>
      </p>

        <p>
            <label> Address: <input name=ba
                autocomplete="section-blue shipping street-address">
            </label>


      </p>
        <p>
            <label> City: <input name=bc
                autocomplete="section-blue shipping address-level2">
            </label>

      </p>
        <p>
            <label> Postal Code: <input name=bp
                autocomplete="section-blue shipping postal-code">
            </label>
      </p>

    </fieldset>
    <fieldset>
        <legend>Ship the red gift to...</legend>
        <p>
            <label> Firstname:
<input name="fname" autocomplete="section-red shipping given-name" type="text" required>
            </label>
      </p>

        <p>
            <label> Lastname:
<input name="fname" autocomplete="section-red shipping family-name" type="text" required>
            </label>
      </p>
        <p>
            <label> Address: <input name=ra
                autocomplete="section-red shipping street-address">
            </label>
      </p>


        <p>
            <label> City: <input name=bc
                autocomplete="section-red shipping address-level2">
            </label>

      </p>

        <p>
            <label> Postal Code: <input name=rp
                autocomplete="section-red shipping postal-code">
            </label>
      </p>

    </fieldset>

        <fieldset>
        <legend>payment address</legend>
        <p>
            <label> Firstname:
<input name="fname" autocomplete="billing given-name" type="text" required>
            </label>
      </p>

        <p>
            <label> Lastname:
<input name="fname" autocomplete="billing family-name" type="text" required>
            </label>
      </p>
        <p>
            <label> Address: <input name=ra
                autocomplete="billing street-address">
            </label>
      </p>


        <p>
            <label> City: <input name=bc
                autocomplete="billing address-level2">
            </label>

      </p>

        <p>
            <label> Postal Code: <input name=rp
                autocomplete="billing postal-code">
            </label>
      </p>

    </fieldset>
    <input type="submit" />
</form>

</body>
</html>

JSBIN

Он содержит 2 отдельные адресные области, а также различные типы адресов. Протестировал его и на iOS 8.1.0, и кажется, что он всегда заполняет все поля одновременно, а адрес hrome для автозаполнения по адресу.

Ответ 7

Здесь это реальный ответ:

Это работает: http://jsfiddle.net/68LsL1sq/1/ <label for="name">Nom</label>
Это не: http://jsfiddle.net/68LsL1sq/2/ <label for="name">No</label>

Единственное различие заключается в самой этикетке. "Nom" cames из "Name" или "Nome" на португальском языке.

Итак, вот что вам нужно:

Обертка формы;
A <label for="id_of_field">Name</label>
An <input id="id_of_field"></input>

Ничего больше.

Ответ 8

Google теперь предоставляет документацию для этого:

быстрее ускоряет загрузку пользователей с помощью Autofill | Интернет | Разработчики Google

Создать удивительные формы: используйте метаданные, чтобы включить автозаполнение | Интернет | Разработчики Google

Ответ 9

Вот новый список автозаполнений Google "имена". Есть все поддерживаемые имена на любом разрешенном языке.

autofill_regex_constants.cc

Ответ 10

В моем случае, $('#EmailAddress').attr('autocomplete', 'off'); не работал. Но следующие работы на Chrome версии 67 от jQuery.

$('#EmailAddress').attr('autocomplete', 'new-email');
$('#Password').attr('autocomplete', 'new-password');