ブラウザでは、Formはどのように機能しますか？

StackOverflow https://stackoverflow.com/questions/4531750

  •  13-10-2019
  •  | 
  •  

質問

どのように形があります オートフィル 最新のWebブラウザで動作しますか？自動フォームフィリングを実装するブラウザで使用される最も一般的な手法はどれですか？

- 編集 -

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

役に立ちましたか？

解決

見渡してください この答え Kmoteによる。

ハイライトは、ブラウザがフィールドを見ていることです name タグと、どのような種類のデータがそこに行くかについて教育を受けた推測をします（regexマッチングはこれを行うための良い素朴な方法です）。 Chromeは、何らかの標準化を取得するために取り組んでいるため、これはそれほどヒットまたはミスではありません。

他のヒント

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

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

答えの最初の要素は、単に標準以外のHTMLフォームです autocomplete 数年前にインターネットエクスプローラーで導入された属性。

皮肉なことに、あなたは良い歴史を読むことができますMozillaサイトの紹介はこちら： XHTMLを使用したオートコンプリート属性とWebドキュメント

この質問はかなり古いですが、私は持っています 2017年の回答を更新しました!

オートコンプリートをトリガーするために、あなたがしなければならないことは、それを正しく名前にすることだけです。

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

これが公式へのリンクです 現在のWhatWG HTML標準 オートコンプリートを有効にするため。

グーグルはaを書きました かなり素敵なガイド モバイルデバイスに優しいWebアプリケーションを開発するため。フォームに入力に名前を付ける方法に関するセクションがあり、自動充填を簡単に使用します。モバイル用に書かれている場合、これはデスクトップとモバイルの両方に適用されます！

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

オートコンプリートを有効にする方法に関するいくつかの重要なポイントを次に示します。

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

資力

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top