Мені хотілося б знати, чи існує якась спеціальна розмітка, яка дозволяє функцію автозаповнення Chrome для певної форми. Я знайшов лише питання, як відключити його, але хотів би знати, чи можу я додати якусь розмітку до html-коду, щоб сказати браузеру «це вхід для адреси» або «це поштовий індекс поле ", щоб правильно заповнити його (припустимо, що користувач активував цю функцію).
Відповіді:
ОНОВЛЕННЯ за 2017 рік: Схоже, відповідь від Katie має більш сучасну інформацію, ніж моя. Майбутні читачі: дайте свої голоси за її відповідь .
Це чудове запитання і питання, щодо якого документація напрочуд важко підійти. Власне, у багатьох випадках ви виявите, що функція автоматичного заповнення 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 нещодавно обговорювало це питання, пояснюючи:
На жаль, дотепер веб-майстрам було важко переконатися, що Chrome та інші постачальники форм можуть правильно розібрати їх форму. Існують деякі стандарти; але вони покладають великі тягарі на впровадження веб-сайту, тому на практиці вони не використовуються багато.
("Стандарти", на які вони посилаються, є більш пізньою версією специфікації, згаданої у відповіді Аваланхіса вище.)
Пост Google продовжує описувати запропоноване ними рішення (яке зустрічається з суттєвою критикою в коментарях до публікації). Вони пропонують для цього використовувати новий атрибут:
Просто додайте атрибут до елемента введення, наприклад, поле електронної адреси може виглядати так:
<input type=”text” name=”field1” x-autocompletetype=”email” />
... де x-виступає "експериментальний", і він буде видалений, якщо & коли це стане стандартом. Прочитайте публікацію для отримання більш детальної інформації, або якщо ви хочете копати глибше, ви знайдете більш повне пояснення пропозиції на wiki wiki .
ОНОВЛЕННЯ:
Як зазначено в цих проникливих відповідях , усі регулярні вирази, які 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 # автозаповнення-поле .
Приклад:
<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 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>
Єдина відмінність - у самій етикетці. "Nom" називається з "Ім'я" або "Nome" португальською мовою.
Отже ось що вам потрібно:
<label for="id_of_field">Name</label><input id="id_of_field"></input>Більше нічого.
Ось новий список "імен" автозаповнення Google. Є всі підтримувані імена на будь-якій дозволеній мові.
Зараз Google надає документацію для цього:
Допоможіть користувачам швидше оформити автозаповнення | Веб | Google Developers
і
У моєму випадку $('#EmailAddress').attr('autocomplete', 'off');не працює. Але наступні роботи над хромованою версією 67 від jQuery.
$('#EmailAddress').attr('autocomplete', 'new-email');
$('#Password').attr('autocomplete', 'new-password');