フォーム要素とフォームをインタラクティブにする方法について学習した後、ユーザーがデータを再入力しなくて済むようにする方法について説明します。
自動入力を最大限に活用する
フォームの記入には時間がかかる場合があります。たとえば、購入するサイトごとに住所を繰り返し入力するのは、快適なショッピング体験とは言えません。
自動入力が役に立ちます。住所は 1 回入力します。今後、他のフォームでも同じ住所を自動的に入力するオプションがブラウザに表示されます。
別の都市に転居しましたか？以前の住所がオプションとして永続的に表示されることはありません。ブラウザに保存されている住所データを編集して、最新の状態に保つことができます。
ブラウザでの自動入力の仕組み
住所フィールドは、サイトによって大きく異なる場合があります。ブラウザは、それが住所フィールドであることをどのようにして認識しますか？
ブラウザはヒューリスティクスを使用して住所フィールドを識別します。name、type、id 属性の値は何ですか？フォーム コントロールに autocomplete 属性が存在しますか？
この情報に基づいて、ブラウザは、以前に入力された同じタイプのデータでフィールドを自動入力するオプションを提供できます。ブラウザによっては、フォーム全体を自動入力することもできます。
ブラウザの自動入力をサポートする
ブラウザで正しい自動入力オプションが表示されるようにするには、以下の方法があります。
適切な属性値を使用する
前述のように、ブラウザはフォーム コントロールの属性を調べることでデータ型を識別できます。
<label for="email">Email</label>
<input type="email" name="email" id="email">
ユーザーがメールアドレスを入力するフィールドはありますか？name、id、type 属性の値として email を使用します。これがメールアドレスのフィールドであることをブラウザに示す 3 つのヒント。
autocomplete 属性
name、id、type 属性のみからデータ型を特定するのが難しい例は他にもあります。autocomplete 属性を使用すると、この問題を解決できます。
使用しているブラウザで以前に名前を入力したことはありますか？ ブラウザでは、デモのこのフィールドに再度入力するオプションが表示される可能性があります。
自動補完と自動入力の使用方法については、後述のモジュールで学習します。
理解度を確認する
自動入力に関する知識をテストする
自動入力はどの属性に基づいて提供されますか？
name 属性。type 属性autocomplete 属性