Я хотел бы знать, существует ли какая-то специальная разметка для включения функции автозаполнения Chrome для определенной формы. Я только нашел вопросы о том, как его отключить, но я хотел бы знать, могу ли я добавить какую-то разметку в HTML-код, чтобы сообщить браузеру «это ввод для адреса» или «это почтовый индекс» поле ", чтобы правильно заполнить его (предполагается, что пользователь активировал эту функцию).
Ответы:
ОБНОВЛЕНИЕ на 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""address.*line|address1|addr1|street""zip|postal|post.*code|pcode|^1z$"Этот вопрос довольно старый, но у меня есть обновленный ответ !
Вот ссылка на документацию WHATWG для включения автозаполнения.
Google написал довольно приятное руководство по разработке веб-приложений, удобных для мобильных устройств. У них есть раздел о том, как назвать входные данные в формах, чтобы легко использовать автозаполнение. Несмотря на то, что он написан для мобильных устройств, он применим как для настольных компьютеров, так и для мобильных устройств!
Вот несколько ключевых моментов о том, как включить автозаполнение:
<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 lnameautocomplete:
name (для полного имени)given-name (для имени)additional-name (для второго имени)family-name (для фамилии)<input type="text" name="fname" autocomplete="given-name">name:emailautocomplete:email<input type="text" name="email" autocomplete="email">name:address city region province state zip zip2 postal country autocomplete:
street-addressaddress-line1address-line2address-level1 (штат или провинция)address-level2 (город)postal-code (почтовый индекс)countryname:phone mobile country-code area-code exchange suffix extautocomplete:telname:ccname cardnumber cvc ccmonth ccyear exp-date card-typeautocomplete:
cc-namecc-numbercc-csccc-exp-monthcc-exp-yearcc-expcc-typename:usernameautocomplete:usernamename:passwordautocomplete:
current-password (для форм входа)new-password (для регистрации и смены пароля)Из моего тестирования 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".
on , offили default. Так что это неправильная разметка и будет склонна к несоответствиям. Я на самом деле думаю, что размещение в атрибуте автозаполнения не имеет значения. Я предполагаю, что он смотрит на все атрибуты, и автозаполнение оказывается одним из тех, которые он проверяет.
Вам нужно правильно назвать элементы, чтобы браузер автоматически их заполнил.
Вот спецификация IETF для этого:
Я просто поработал со спецификацией и получил хороший рабочий пример - включая еще несколько полей.
<!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>Он содержит 2 отдельные адресные области, а также разные типы адресов. Протестировал его также на iOS 8.1.0 и кажется, что он всегда заполняет все поля сразу, а настольный Chrome автоматически заполняет адрес по адресу.
Похоже, мы получим больше контроля над этой функцией автозаполнения, в 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
Вот это реальный ответ:
Это работает: 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>Ничего более.
Вот новый список автозаполнений Google "имена". Есть все поддерживаемые имена на любом разрешенном языке.
Google теперь предоставляет документацию для этого:
Помогите пользователям быстрее оформить заказ с помощью автозаполнения | Веб | Разработчики Google
и
В моем случае $('#EmailAddress').attr('autocomplete', 'off');не сработало. Но следующие работы на Chrome версии 67 от jQuery.
$('#EmailAddress').attr('autocomplete', 'new-email');
$('#Password').attr('autocomplete', 'new-password');