formタグで入力フォームを作るときにオートコンプリート機能があるということなので
まとめておきます。
HTML の autocomplete 属性
HTML の autocomplete 属性は、入力値としてテキストまたは数値を取る 要素、 要素、 要素、 要素で利用できます。 autocomplete を使用すると、ウェブ開発者は入力欄にどの種類の情報が期待されているかをブラウザーに示唆するのと同様に、ユーザーエージェントがフォーム入力欄の値を埋めるための自動支援を提供する必要があることを指定します。
提案値の情報源は、一般にブラウザーに依存します。ふつうは、ユーザーが入力した過去の値からとりますが、あらかじめ構成された値から取得することもあります。例えば、ブラウザーはユーザーに名前、住所、電話番号、メールアドレスを自動補完するために保存させることができます。おそらく、ブラウザーは以降の認証手続で自動補完を行うために、クレジットカード情報を暗号化して保存する機能を提供しているでしょう。
(MDN Web Docsより引用)
ブラウザに依存するのでユーザーが入力したことがあるメールアドレスだったり、住所などが補完されるということになります。
また自動補完させないようにするには
autocomplete="off"
とするそうなのですが、ブラウザによってはうまくいかない場合もあるようです。
マスターパスワードが用いられない場合でも、ブラウザーのパスワード管理機能は純粋にセキュリティの向上につながります。パスワードをブラウザーが保存すればユーザーは覚えなくてもよいため、覚えなければならない場合よりも強固なパスワードをユーザーが設定できるようになります。
このような理由から、現代的なブラウザーの多くはログイン欄における autocomplete="off" に対応していません。
- ウェブサイトが autocomplete="off" を に設定しており、かつそのフォーム内にユーザー名とパスワードの入力欄が含まれていた場合、ブラウザーはログイン情報を記憶するか尋ねてきて、ユーザーが同意すれば、次回の訪問時にログイン欄を自動入力します。
- ウェブサイトが autocomplete="off" をユーザー名とパスワードの 欄に設定していた場合でも、ブラウザーはログイン情報を記憶するか尋ねてきて、ユーザーが同意すれば、次回の訪問時にログイン欄を自動入力します。
autocomplete属性の使い方
HTMLのinputタグやtextareaタグにautocomplete属性を指定することでブラウザに設定した情報を利用したオートコンプリート機能が利用できます。
<input type="text" autocomplete="属性値">
メールアドレスの自動補完
<input type="email" name="email" autocomplete="email">
See the Pen autocomplete Email by morioka (@rm5912) on CodePen.
クレジットカードの自動補完
See the Pen autocomplete CreditCard by morioka (@rm5912) on CodePen.
autocompleteの値(一例）
| 値の名前 | 補完する内容 |
|---|---|
| off | autocompleteを許可しない |
| on | autocompleteを許可する |
| name | 氏名 |
| given-name | ファーストネーム |
| additional-name | ミドルネーム |
| family-name | ラストネーム |
| メールアドレス | |
| username | ユーザー名またはアカウント名 |
| new-password | 新しいパスワード |
| current-password | 現在のパスワード |
| postal-code | 郵便番号 |
| address-level1 | 都道府県 |
| address-level2 | 市区町村 |
| address-level3 | 町域 |
| address-level4 | 番地など |
| organization | 企業・団体・組織名 |
| bday | 生年月日 |
| bday-year | 生年月日の年 |
| bday-mounth | 生年月日の月 |
| bday-day | 生年月日の日 |
| tel | 電話番号 |
| tel-area-code | 市外局番 |
| tel-local | 市外局番を除いた電話番号 |
| cc-name | クレジットカード登録名 |
| cc-given-name | 登録名のファーストネーム |
| cc-additional-name | 登録名のミドルネーム |
| cc-family-name | 登録名のラストネーム |
| cc-number | カード番号 |
| cc-exp | カードの有効期限 |
| cc-exp-month | カードの有効期限の月 |
| cc-exp-year | カードの有効期限の年 |
| cc-csc | カードのセキュリティコード |
終わりに
フォームで入力する際になぜクリックすると自動補完できるのかわかりませんでしたが
autocompleteを利用することでできるとわかりました。
ブラウザによってもうまく作動しないなど、あるようなので注意は必要です。
参考サイト
お問い合わせフォーム最適化。改善しておきたい16の項目
MDN Web Docs HTML の autocomplete 属性
クロスブラウザに対応したオートコンプリート付き入力フォーム