フォーム要素と、フォームをインタラクティブにする方法について学習しました。次に、ユーザーがデータを再入力しないようにする方法を見てみましょう。
自動入力を最大限に活用する
フォームの入力には時間がかかる場合があります。 たとえば、何かをしたいと思ったどのサイトでも同じ住所を繰り返し入力するのは、良いショッピング体験とは言えません。
ここでは自動入力が役立ちます。 住所は一度だけ入力します。 今後は、他のフォームでも同じ住所を自動入力できるようになります。
別の都市に引っ越された場合は、以前の住所を永続的に保持する必要はありません。ブラウザに保存されている住所データを編集して、最新の状態に保つことができます。
ブラウザでの自動入力の仕組みを教えてください。
アドレス フィールドは、サイトによって大きく異なる場合があります。ブラウザは、このフィールドがアドレス フィールドであることをどのようにして判断しますか？
ブラウザはヒューリスティックを使用して、住所フィールドを識別します。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 属性