web-dev-qa-db-ja.com

ブラウザでのフォームの自動入力はどのように機能しますか？

Form autofill は最新のWebブラウザーでどのように機能しますか？自動フォーム入力を実装するブラウザーで使用される最も一般的な手法はどれですか。

-編集-

問題はオートコンプリートではなく、フォームの自動入力に関するものです。これは、以前に入力された値だけでなく、入力するフィールドの意味と構造も考慮します。 Google Chrome実装、たとえば 入力フィールドを解析するための試行 それらのタイプと構造を推測します。または少なくとも、上記のリンクから理解したことです。

browserformsautofill
31
fjsj

この答え をkmoteで見てください。

ハイライトは、ブラウザーがフィールドのnameタグを見て、そこにどのような種類のデータが入るのかを知識に基づいて推測することです（正規表現マッチングはこれを行うための素朴な方法です）。 Chromeは、何らかの標準化に取り組んでいるため、これがヒットまたはミスとは異なります。

12
akroy

さまざまなテクノロジーとブラウザは、さまざまな方法を使用して、何を表示するか、どのように表示するかを計算しますが、チェックアウトするソースは次のとおりです。

自分で実装する（または単に使用する）ことを検討している場合は、プラグインを確認することを強くお勧めします。

9
Igor

回答の最初の要素は、数年前にInternet Explorerで導入された非標準のHTMLフォームのautocomplete属性です。

皮肉なことに、Mozillaサイトの紹介の良い履歴をここで読むことができます。 XHTMLを使用したautocomplete属性とWebドキュメント

4
Simon Mourier

この質問はかなり古いですが、2017の更新された回答があります！

オートコンプリートをトリガーするには、正しい名前を付けるだけです。

次の回答は、ここからの私の元の回答からです： https://stackoverflow.com/a/41965106/169615

ここにオートコンプリートを有効にするための公式現在のWHATWG HTML標準へのリンクがあります。 =

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

HTMLフォームでオートコンプリートを有効にする方法

オートコンプリートを有効にする方法に関する重要なポイントは次のとおりです。

  • すべての<label>フィールドに<input>を使用します
  • <input>タグにautocomplete属性を追加し、この guide を使用して入力します。
  • すべての<input>タグのnameおよびautocomplete属性に正しく名前を付けます

  • 例：

    <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="[email protected]" required autocomplete="email">

<!-- note that "emailC" will not be autocompleted -->
<label for="frmEmailC">Confirm Email</label>
<input type="email" name="emailC" id="frmEmailC"
placeholder="[email protected]" required autocomplete="email">

<label for="frmPhoneNumA">Phone</label>
<input type="tel" name="phone" id="frmPhoneNumA"
placeholder="+1-555-555-1212" required autocomplete="tel">

<input>タグに名前を付ける方法

オートコンプリートをトリガーするには、<input>タグでnameおよびautocomplete属性に正しい名前を付けていることを確認してください。これにより、フォームのオートコンプリートが自動的に許可されます。また、<label>！この情報は here にもあります。

入力に名前を付ける方法は次のとおりです。

  • 名前
    • 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（サインアップおよびパスワード変更フォーム用）

資源

3
Katie