このコースの フォーム要素と、フォームの作成方法 インタラクティブ ユーザーがデータを再入力しないようにする方法を見てみましょう。
自動入力を最大限に活用する
フォームへの入力は手間がかかります。 たとえば、購入するすべてのサイトで同じ住所を繰り返し入力するのは、良いショッピング エクスペリエンスとは言えません。
自動入力が役立ちます。 住所を 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 属性