10 回目の住所の再入力は面倒な作業です。ブラウザとデベロッパーは、ユーザーがデータをすばやく入力し、データを再入力しなくても済むようにすることができます。このモジュールでは、自動入力の仕組みと、autocomplete などの要素属性を使用してブラウザで適切な自動入力オプションを提供する方法について説明します。
自動入力の仕組み
自動入力の概要では、自動入力の基本について学習しました。では、なぜブラウザで自動入力に対応しているのでしょうか。
フォームへの入力は面白くないが、それでも頻繁に行っている作業です。時間の経過とともに、多くのフォームに記入することになり、同じデータを入力することがしばしばあります。ユーザーがフォームにすばやく入力できるようにする方法の一つは、以前に入力したデータをフォーム フィールドに自動的に入力できるようにすることです。自動入力です
ブラウザは自動入力するデータをどのように判断しますか？フォーム項目の例をご覧ください
<label for="name">Name</label>
<input name="name" id="name">
このフォーム フィールドを送信すると、ブラウザは値（入力したデータ）と name 属性の値（名前）を保存します。一部のブラウザでは、データの保存や入力の際に id 属性も参照されます。
数週間後、別のウェブサイトで別のフォームに記入したとします。このサイトには、name="name" のフォーム フィールドもあります。名前の値はすでに保存されているため、ブラウザで自動入力ができるようになりました。
自動入力は、登録とログイン、お支払い、購入手続き、名前や住所の入力が必要なフォームなど、定期的に使用するフォームで特に便利です。
autocomplete 属性に適切な値を使用すると、ブラウザで最適な自動入力オプションを提供できます。autocomplete に指定できる値は数多くあります。こちらが住所の例です。
ブラウザに住所がすでに保存されていますか？これで、住所フォームの最初のフィールドを操作すると、保存されている住所の一覧がブラウザに表示されます。いずれかを選択すると、その住所に関連するすべてのフィールドに値が設定されます。自動入力を使用すると、フォームにすばやく簡単に入力できます。
住所フォームのフィールドはすべて同じではなく、フィールドの順序も異なります。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 では、JavaScript で WebOTP API を使用してこれを実現できます。
ウェブで電話番号を確認する方法について詳しくは、SMS OTP フォームのベスト プラクティスをご覧ください。
クレジット カード情報の入力をサポートする
多くの e コマースサイトでは、クレジット カードを使用して商品を購入できます。独自のフォームを提供するサードパーティの支払いプラットフォームを使用しているサイトもありますが、独自の支払いフォームを作成する必要がある場合は、ユーザーが簡単に支払い情報を入力できるようにしてください。
autocomplete 属性を再度使用すると、ブラウザで適切な自動入力オプションを提供できます。
クレジット カード番号 cc-number の値、クレジット カードの有効期限 cc-exp、クレジット カード決済に必要な情報があります。
クレジット カード番号や電話番号などの数字は 1 つの入力で使用して、ブラウザで自動入力が行われるようにします。オートコンプリートを使用できるように、カスタム要素ではなく、標準のフォーム要素（支払いカードの日付を示す <select> など）を使用します。
詳しくは、ユーザーが支払いデータを再入力しないようにする方法をご覧ください。
すべての項目で自動入力が機能していることを確認する
住所、アカウント情報、クレジット カード情報のほかにも、ブラウザでの自動入力が可能なフィールドは他にも多数あります。
フォームに電話番号フィールドを追加する際は、オートコンプリートに使用可能な値を使用できるかどうかを確認してください。フォームのフィールドに適切な値は見つかりましたか？それを追加します。
autocomplete 属性に適切な値を使用すると、ブラウザで最適な自動入力オプションが提供され、ユーザーがフォームにすばやく入力できるようになります。
自動入力されない情報をブラウザが認識できるようにする
自動入力の仕組み、自動入力によってブラウザを支援する方法、自動入力によってユーザーがフォームに入力しやすくなる理由について学びました。ただし、ブラウザで自動入力を提供したくない場合もあります。
<label for="one-time-code">One-time code</label>
<input autocomplete="off" type="text" name="one-time-code" id="one-time-code">
自動入力が役に立たない例としては、1 回限りのコード フィールドなど、1 回限りの固有の値を入力する場合が挙げられます。値は毎回異なるため、ブラウザで値を保存したり、自動入力オプションを提供したりしないでください。このようなフィールドに autocomplete="off" を使用すると、自動入力を防ぐことができます。
autocomplete="off" のもう 1 つのユースケースは、ハニーポット フィールドです（前のモジュールを参照）。このフィールドは表示されませんが、残りのフィールドはブラウザによって自動的に入力される場合があります。自動入力をオフにすると、フィールドが自動的に入力されるため、実際のユーザーが bot として識別されなくなります。
自動入力は、ユーザーの役に立つと確信できる場合にのみ無効にしてください。
理解度をチェックする
自動入力に関する知識をテストする
登録フォームのパスワード欄には、どのオートコンプリート値を使用すればよいですか。
autocomplete="password"autocomplete="off"autocomplete="new-password"autocomplete="current-password"