35

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

- 編集 -

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

4

4 に答える 4

16

kmoteによるこの回答を見てください。

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

于 2013-10-14T21:31:47.053 に答える
10

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

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

于 2011-02-11T20:10:43.547 に答える
4

The first element of answer is simply the non standard HTML form's autocomplete attribute that was introduced with Internet Explorer a few years ago.

Ironically, you can read a good history an introduction on mozilla site here: The autocomplete attribute and web documents using XHTML

于 2010-12-25T21:37:59.593 に答える
4

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

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

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

オートコンプリートを有効にするための公式の現在のWHATWGHTML標準へのリンクは次のとおりです。

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:44:57.720 に答える