201

特定のフォームでChromeの自動入力機能を有効にするための特別なマークアップがあるかどうかを知りたいのですが。無効にする方法についての質問しか見つかりませんでしたが、ブラウザに「これはアドレスの入力です」または「これは郵便番号です」と伝えるために、HTMLコードに何らかのマークアップを追加できるかどうかを知りたいです。フィールド」に正しく入力します（ユーザーがこの機能をアクティブにしたと仮定します）。

4

10 に答える 10

191

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やその他のフォーム入力プロバイダーがフォームを正しく解析できることを確認することは困難でした。いくつかの標準が存在します。しかし、ウェブサイトの実装に負担がかかるため、実際にはあまり使用されていません。

（彼らが参照する「標準」は、上記のAvalanchisの回答で言及された仕様のより最近のバージョンです。）

グーグルの投稿は、彼らの提案された解決策を説明し続けています（それは投稿のコメントで重大な批判によって満たされています）。彼らは、この目的のために新しい属性の使用を提案しています。

input要素に属性を追加するだけです。たとえば、メールアドレスフィールドは次のようになります。

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

...ここでx-「実験的」の略であり、これが標準になると削除されます。詳細については投稿を読んでください。さらに深く掘り下げたい場合は、whatwgwikiで提案のより完全な説明を見つけることができます。

更新：これらの洞察に満ちた 回答で 指摘されているように、Chromeが一般的なフィールドを識別/認識するために使用するすべての正規表現はにありますautofill_regex_constants.cc.utf8。したがって、元の質問に答えるには、htmlフィールドの名前がこれらの式と一致することを確認してください。いくつかの例が含まれます：

  • ファーストネーム： "first.*name|initials|fname|first$"
  • 苗字： "last.*name|lname|surname|last$|secondname|family.*name"
  • Eメール： "e.?mail"
  • 住所1）： "address.*line|address1|addr1|street"
  • 郵便番号： "zip|postal|post.*code|pcode|^1z$"
于 2012-03-20T21:18:01.670 に答える
123

この質問はかなり古いですが、私は更新された答えを持っています！

オートコンプリートを有効にするためのWHATWGドキュメントへのリンクは次のとおりです。

Googleは、モバイルデバイスに適したWebアプリケーションを開発するための非常に優れたガイドを作成しました。自動入力を簡単に使用できるように、フォームの入力に名前を付ける方法に関するセクションがあります。モバイル向けに書かれていますが、これはデスクトップとモバイルの両方に当てはまります。

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">
  • Eメール
    • これらのいずれかを使用してくださいname：email
    • これらのいずれかを使用してくださいautocomplete：email
    • 例：<input type="text" name="email" autocomplete="email">
  • 住所
    • これらのいずれかを使用してくださいname：address city region province state zip zip2 postal country
    • これらのいずれかを使用してくださいautocomplete：
      • 1つのアドレス入力の場合：
        • street-address
      • 2つのアドレス入力の場合：
        • 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（サインアップおよびパスワード変更フォーム用）

資力

于 2017-01-31T18:39:26.980 に答える
39

私のテストから、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"が必要です。

于 2013-05-31T19:18:08.767 に答える
5

ブラウザが要素を自動入力できるように、要素に適切な名前を付ける必要があります。

これに関するIETF仕様は次のとおりです。

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

于 2011-10-17T21:41:10.517 に答える
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でもテストしましたが、デスクトップクロームはアドレスごとに自動入力しますが、常にすべてのフィールドに一度に入力するようです。

于 2014-11-06T16:43:43.697 に答える
2

この自動入力機能についてより詳細に制御できるようです。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

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

于 2013-05-28T16:11:56.243 に答える
0

これが本当の答えです：

唯一の違いは、ラベル自体にあります。「Nom」はポルトガル語で「Name」または「Nome」に由来します。

だからここにあなたが必要なものがあります：

  • フォームラッパー。
  • A<label for="id_of_field">Name</label>
  • アン<input id="id_of_field"></input>

これ以上何もない。

于 2014-11-07T15:31:17.787 に答える
0

これがGoogleオートフィルの「名前」の新しいリストです。許可されている言語でサポートされている名前はすべてあります。

autofill_regex_constants.cc

于 2017-11-28T12:36:19.490 に答える
-3

私の場合、動作し$('#EmailAddress').attr('autocomplete', 'off');ません。しかし、以下はjQueryによるchromeバージョン67で動作します。

$('#EmailAddress').attr('autocomplete', 'new-email');
$('#Password').attr('autocomplete', 'new-password');
于 2018-07-22T16:04:09.270 に答える