回答:
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 Webmastersグループからの非常に有益な投稿でこの問題が議論され、次のように説明されています。
残念ながら、これまでウェブマスターがChromeや他のフォーム入力プロバイダーがフォームを正しく解析できるようにすることは困難でした。いくつかの標準が存在します。ただし、ウェブサイトの実装に負担がかかるため、実際にはあまり使用されていません。
(彼らが参照する「標準」は、上記のAvalanchisの回答で言及された仕様のより新しいバージョンです。)
グーグルの投稿は彼らの提案された解決策を説明し続けます(投稿のコメントでの重大な批判によって満たされます)。彼らはこの目的のために新しい属性の使用を提案します:
input要素に属性を追加するだけです。たとえば、メールアドレスフィールドは次のようになります。
<input type=”text” name=”field1” x-autocompletetype=”email” />
... x-
「実験的」の略で、これが標準になった場合は削除されます。詳細については投稿をお読みください。詳細を知りたい場合は、whatwg 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ドキュメントへのリンクは次のとおりです。
グーグルはかなりいいガイドを書いたモバイルデバイスに適したWebアプリケーションを開発ためのを。オートフィルを簡単に使用できるようにフォームの入力に名前を付ける方法に関するセクションがあります。Eventhはモバイル向けに書かれていますが、これはデスクトップとモバイルの両方に当てはまります。
オートコンプリートを有効にする方法に関する重要なポイントは次のとおりです。
<label>
すべての<input>
フィールドにa を使用します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
name
。username
autocomplete
。username
name
。password
autocomplete
。
current-password
(サインインフォーム用)new-password
(サインアップおよびパスワード変更フォーム用)私のテストでは、x-autocomplete
タグは何もしません。代わりautocomplete
に、入力タグでタグを使用して、http: //www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-formsのHTML仕様に従って値を設定します。 html#autofill-field。
例:
<input name="fname" autocomplete="given-name" type="text" placeholder="First Name" required>
親フォームタグには、autocomplete = "on"およびmethod = "POST"が必要です。
私は仕様をいろいろと試してみて、いくつかのフィールドを含めて、すばらしい実用例を得ました。
<!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でもテストしました。デスクトップクロムはアドレスごとにアドレスを自動入力しますが、常に一度にすべてのフィールドを埋めるようです。
この自動入力機能をより詳細に制御できるようです。ChromeCanaryには新しい実験的なAPIがあり、ユーザーに要求した後にデータにアクセスするために使用できます。
http://www.chromium.org/developers/using-requestautocomplete http://blog.alexmaccaw.com/requestautocomplete
グーグルによる新しい情報:
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」はポルトガル語の「Name」または「Nome」に由来します。
だからここにあなたが必要なものがあります:
<label for="id_of_field">Name</label>
<input id="id_of_field"></input>
これ以上何もない。
これは、Googleオートフィルの「名前」の新しいリストです。サポートされているすべての名前が、許可されている言語で表示されます。
Googleは現在、これに関するドキュメントを提供しています。
自動入力でユーザーがより早くチェックアウトできるようにする| ウェブ| Google Developers
そして
すばらしいフォームを作成する:メタデータを使用してオートコンプリートを有効にします。ウェブ| Google Developers
私の場合、動作し$('#EmailAddress').attr('autocomplete', 'off');
ません。しかし、以下はjQueryによるChromeバージョン67で動作します。
$('#EmailAddress').attr('autocomplete', 'new-email');
$('#Password').attr('autocomplete', 'new-password');