住所を 10 回も再入力するのは面倒です。ブラウザとデベロッパーは、ユーザーがデータをより迅速に入力し、データの再入力を回避できるようにします。このモジュールでは、自動入力の仕組みと、autocomplete などの要素属性を使用して、ブラウザが適切な自動入力オプションを提供できるようにする方法について説明します。
自動入力の仕組み
自動入力の概要では、自動入力の基本について説明しました。では、ブラウザが自動入力機能を提供しているのはなぜでしょうか？
フォームへの入力は面白いアクティビティではありませんが、頻繁に行うアクティビティです。フォームに記入する機会は多く、同じデータを何度も入力することがよくあります。ユーザーがフォームをより迅速に入力できるようにする方法の 1 つは、以前に入力したデータでフォーム フィールドを自動的に入力するオプションを提供することです。これが自動入力です。
ブラウザは、自動入力するデータをどのように認識するのですか？フォーム フィールドの例を見てみましょう。
<label for="name">Name</label>
<input name="name" id="name">
このフォーム フィールドを送信すると、ブラウザは値（入力したデータ）を name 属性（名前）の値とともに保存します。一部のブラウザでは、データの保存と入力の際に id 属性も確認します。
数週間後、別のウェブサイトで別のフォームに記入したとします。このサイトには、name="name" を含むフォーム フィールドもあります。名前の値がすでに保存されているため、ブラウザで自動入力が可能になりました。
自動入力は、登録、ログイン、支払い、購入手続き、名前や住所の入力が必要なフォームなど、定期的に使用するフォームで特に便利です。
autocomplete 属性に適切な値を使用すると、ブラウザで最適な自動入力オプションを表示できます。autocomplete には多くの値を指定できます。アドレスの例を次に示します。
ブラウザに住所がすでに保存されていますか？これで、住所フォームの最初のフィールドを操作すると、ブラウザに保存済みの住所のリストが表示されます。1 つを選択すると、ブラウザによって住所に関連するすべてのフィールドが入力されます。自動入力を使用すると、フォームへの入力をすばやく簡単に行うことができます。
住所フォームのフィールドはすべて同じではなく、フィールドの順序も異なります。autocomplete に正しい値を使用すると、ブラウザがフォームに正しい値を入力します。country、postal-code、その他多数の値があります。
ユーザーがすばやくログインし、安全なパスワードを使用できるようにする
パスワードを覚えるのが苦手な人はたくさんいます。最も一般的なパスワードは「123456」で、覚えやすい組み合わせが続きます。安全で固有のパスワードをすべて覚えていなくても使用するにはどうすればよいですか？
ブラウザには、パスワードを生成、保存、入力するパスワード マネージャーが組み込まれています。ブラウザでメールの自動入力やパスワードの管理をサポートする方法をご覧ください。
メール フィールドに autocomplete="email" を使用すると、メールアドレスの自動入力オプションがユーザーに表示されます。
登録フォームであるため、以前使用したパスワードを入力するオプションは表示されません。autocomplete="new-password" を使用すると、ブラウザで新しいパスワードを生成するオプションが提供されるようになります。
ログイン フォームで autocomplete="current-password" を使用すると、ブラウザにこのウェブサイトで以前に保存したパスワードを入力するオプションを表示させることができます。
多くのウェブサイトで 2 段階認証プロセスを設定できます。パスワードに加えて、ワンタイム コードが SMS または 2 段階認証アプリで送信されます。
SMS メッセージで受け取ったコードが画面キーボードで候補として表示され、それを直接選択して値を入力できたら便利だと思いませんか？Safari 14 以降では、autocomplete="one-time-code" を使用してこれを実現できます。Android 版 Chrome では、WebOTP API を使用して JavaScript でこれを実現できます。
詳しくは、SMS OTP フォームのベスト プラクティスをご覧ください。
注意: 電話番号は再利用されたり、不正使用されたりする可能性があるため、SMS は単独では最も安全な認証方法ではありません。他の 2 要素認証方法または多要素認証の使用を検討してください。
クレジット カード情報の入力をサポートする
多くの e コマース ウェブサイトでは、クレジットカードを使用して商品を購入できます。サイトでは、独自のフォームを提供するサードパーティの支払いプラットフォームを使用している場合がありますが、独自の支払いフォームを作成する必要がある場合は、ユーザーが支払い情報を簡単に記入できるようにしてください。
autocomplete 属性を再度使用して、ブラウザで正しい自動入力オプションが提供されるようにすることができます。
クレジット カード番号 cc-number、クレジット カードの有効期限 cc-exp、クレジット カード決済に必要なその他のすべての情報の値があります。
クレジット カード番号や電話番号などの数字には、ブラウザで自動入力が提供されるように、単一の入力を使用します。カスタム要素ではなく、標準のフォーム要素（支払いカードの日付の <select> など）を使用して、自動入力が利用可能であることを確認します。
詳しくは、ユーザーが支払いデータを再入力しなくても済むようにする方法をご覧ください。
すべてのフィールドで自動入力が機能することを確認する
住所、アカウント情報、クレジット カード情報以外にも、ブラウザが自動入力でユーザーをサポートできるフィールドはたくさんあります。
フォームに電話番号フィールドを追加する場合は、オートコンプリートに使用可能な値があるかどうかを確認します。フォーム フィールドに適した値が見つかりましたか？追加します。
autocomplete 属性に適切な値を使用すると、ブラウザで最適な自動入力オプションが提供され、ユーザーがフォームをより迅速に入力できるようになります。
フィールドを自動入力しないようブラウザに指示する
自動入力の仕組み、自動入力でブラウザをサポートする方法、自動入力によってユーザーがフォームを簡単に記入できる理由について説明しました。ただし、ブラウザに自動入力の候補を表示させたくない場合もあります。
<label for="one-time-code">One-time code</label>
<input autocomplete="off" type="text" name="one-time-code" id="one-time-code">
自動入力が役に立たないのは、ワンタイム コード フィールドなど、一回限りの固有の値を入力する場合です。値は毎回異なり、ブラウザは値を保存したり、自動入力オプションを提供したりしてはなりません。このようなフィールドに autocomplete="off" を使用すると、自動入力を防ぐことができます。
autocomplete="off" のもう一つのユースケースは、ハニーポット フィールドです（前のモジュールを参照）。このフィールドは表示されませんが、ブラウザは他のフィールドとともに自動入力する可能性があります。自動入力機能をオフにすると、フィールドが自動的に入力されることで、実際のユーザーがボットとして識別されるのを防ぐことができます。
自動入力の無効化は、ユーザーの役に立つと確信できる場合にのみ行うようにしてください。
理解度を確認する
自動入力に関する知識をテストする
登録フォームのパスワード フィールドには、どのような自動入力値を使用すべきですか？
autocomplete="password"autocomplete="off"autocomplete="new-password"autocomplete="current-password"