191

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

html google-chrome autofill Рислинг
источник

182

ОБНОВЛЕНИЕ на 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$"
Фамилия: "last.*name|lname|surname|last$|secondname|family.*name"
Эл. адрес: "e.?mail"
Адресная строка 1): "address.*line|address1|addr1|street"
почтовый индекс: "zip|postal|post.*code|pcode|^1z$"

kmote
источник

3

Кроме того, вы должны отправить полный тег <form> с «action» и «method»

qualle

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

Мика

Я предполагаю, что константы регулярного выражения автозаполнения - не единственное, что он использует, это также запоминание вещей из пользовательских имен.

CloudMeta

1

Использовал URL в этом ответе, и он был сломан. Это работает сейчас: code.google.com/p/chromium/codesearch#chromium/src/components/…

Натан

2

URL, предоставленный @Nathan, больше не работает - вот текущий, пока они не изменят его снова. Cs.chromium.org/chromium/src/components/autofill/core/common/…

HungryBeagle

85

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

Вот ссылка на документацию 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="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 (почтовый индекс)
  - 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 году.

Кэти
источник

39

Из моего тестирования 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>

Для родительского тега формы требуется autocomplete = "on" и method = "POST".

Михей
источник

2

в каких браузерах реализована эта спецификация? какой-нибудь опыт / тесты сделаны?

Staabm

В W3C SPEC говорится , что автозаполнение должно содержать только on , offили default. Так что это неправильная разметка и будет склонна к несоответствиям. Я на самом деле думаю, что размещение в атрибуте автозаполнения не имеет значения. Я предполагаю, что он смотрит на все атрибуты, и автозаполнение оказывается одним из тех, которые он проверяет.

Лиам

1

Это правильный HTML, смотрите спецификацию WHATWG и пост Google .

AlecRust

5

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

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

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

Avalanchis
источник

4

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

<!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 и кажется, что он всегда заполняет все поля сразу, а настольный Chrome автоматически заполняет адрес по адресу.

staabm
источник

1

Не уверен, почему этот ответ получает отрицательные отзывы. Пример выше все еще работает для меня, используя описанные браузеры

staabm

1

Автозаполнение, показанное в приведенных выше примерах, приведено здесь: html.spec.whatwg.org/multipage/forms.html#autofill

Брайан Ребейн

2

Похоже, мы получим больше контроля над этой функцией автозаполнения, в 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

Рислинг
источник

0

Вот это реальный ответ:

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

Разница лишь в самой этикетке. «Ном» происходит от «Имени» или «Нома» на португальском языке.

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

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

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

Totty.js
источник

Я также выяснил, что метка может также вызвать автозаполнение цветов.

Эмфи

Итак, вы считаете, что имя метки также используется при разработке полей автозаполнения? Этот ответ не очень ясен

Лиам

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

AxelH

0

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

autofill_regex_constants.cc

Alvargon
источник

0

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

Помогите пользователям быстрее оформить заказ с помощью автозаполнения | Веб | Разработчики Google

и

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

Генри
источник

Ответы, содержащие только ссылки, становятся бесполезными, если эти ссылки отключаются, как и первый ответ.

Бфонтен

Верно, но вот почему ответом является вики сообщества: поощрять других вносить свой вклад. Кроме того, отказ от участия в вики сообщества не влияет на автора, он служит только для того, чтобы похоронить собственную документацию Google. Всегда не стесняйтесь обновлять ответ вики сообщества, особенно если это так же просто, как обновить ссылку!

Генри

-3

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

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

reza.cse08
источник

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

Ответы:

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

Как назвать ваши `<input>`теги

Ресурсы

JSBIN

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

Ответы:

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

Как назвать ваши <input>теги

Ресурсы

JSBIN

Как назвать ваши `<input>`теги