はじめに
この記事はZOZO - Qiita Advent Calendar 2024 - Qiita の6日目の記事です。
記事の内容
- 書いてあること
- autocompleteの基本概念と主要ブラウザの挙動
- 書いていないこと
- 詳細な技術的説明や特定の実装方法
autocompleteについて
autocompleteとは？
フォームの入力フィールドにブラウザが過去に入力した情報を自動的に補完する機能を提供するための属性です。ユーザーは以前に入力した情報を再度入力する手間を省けます。
HTML 属性: autocomplete - HTML: ハイパーテキストマークアップ言語 | MDN によると、autocompleteを指定する際には一緒に以下も揃っている必要があるようです。
メモ: 自動入力を提供するために、ユーザーエージェントは // 要素に次のことを要求することがあります。
1.name や id 属性を持つこと
要素の子孫であること
2.
3.submit ボタンを持っているフォームが所有元であること
基本仕様
autocomplete="〇〇"で設定した〇〇の値に合わせてサジェストされる
以下のコードの場合は電話番号がサジェストされます。
<input placeholder="電話番号" type="tel" autocomplete="tel">
入力できる値については以下をご確認ください。
autocompleteについて明示的に記載していない場合はidやnameから推測される
autocomplete＝〇〇を指定していない場合は、autocomplete="on"としてみなされ、idやnameから自動的に推測されるため、以下のコードの場合でも電話番号がサジェストされます。
<input placeholder="電話番号" type="tel" id="tel">
自動補完を無効にするためには autocomplete="off" を記述する必要がありますが、フォームの自動補完を無効にするには - ウェブセキュリティ | MDN に記載の通り、
ブラウザーに対して、同様のフォームで自動補完を行うために、ユーザーが入力したデータを保存しないよう指示しますが、実際の動作はブラウザーによって異なります。
とあります。
また、
autocomplete を off に設定してもブラウザーがサジェスト値を表示し続ける場合は、 input 要素の name 属性を変更する必要があります。
ということもあり、name属性も推測不可能な名称にする必要があり、自動補完を無効にするのが難しい理由の一つです。
主要ブラウザのautocompleteについて
パソコン
| ブラウザ | autocomplete | 自動入力の設定方法 | 補完項目 |
|---|---|---|---|
| Google Chrome | ◯ | Chrome でフォームに自動入力する - パソコン - Google Chrome ヘルプ |
 国/地域 郵便番号 都道府県 番地 組織 名前 電話 メール |
| Mozilla Firefox | ◯ | フォームの自動補完 Firefox ヘルプ | 一度入力したフォームの値を記憶する形式 |
| Safari | ◯ | MacのSafariで「自動入力」設定を変更する - Apple サポート (日本) |
 姓・名 姓・名（フリガナ） 電話 メール ユーザー名 郵便番号 都道府県 郡/市区町村 以降の住所 国/地域 |
| Microsoft Edge | ◯ | Microsoft Edge で情報を自動的に入力する - Microsoft サポート |
 名ミドルネーム 姓 生年月日 組織 電話 メール 国/組織 郵便番号 都道府県 番地 |
スマートフォン
| OS | ブラウザ | autocomplete | 自動入力の設定方法 | 補完項目 |
|---|---|---|---|---|
| Android 15 | Google Chrome | ◯ | Chrome でフォームに自動入力する - Android - Google Chrome ヘルプ | 国/地域 郵便番号 都道府県 番地 組織 名前 電話 メール |
| iOS 18.0 | Safari | ◯ | iPhoneのSafariで情報を自動入力する - Apple サポート (日本) | 姓 姓（フリガナ） 名 名（フリガナ） 会社 会社名（フリガナ） 電話 メール 代名詞 URL 住所 生年月日 |
主要ブラウザの挙動について
サンプルとして Check autocomplete を使って各ブラウザで想定通りの値が入力されるかを確認してみました！
パソコン
| 項目 | 指定した値 | Google Chrome バージョン: 131.0.6778.109（Official Build） （arm64） |
Mozilla Firefox バージョン 133.0 (64 ビット) |
Safari バージョン18.1 |
Microsoft Edge バージョン 131.0.2903.70 (公式ビルド) (arm64) |
|---|---|---|---|---|---|
| 姓 | family-name | ◯ | ー | ◯ | ◯ |
| 名 | given-name | ◯ | ー | ◯ | ◯ |
| 郵便番号 | postal-code | ◯ | ー | ◯ | ◯ |
| 住所1 | address-line1 | ◯ 「番地」に入力した内容が入る |
ー | ◯ 「以降の住所」に入力した内容が入る |
◯ 「番地」に入力した内容が入る |
| 住所2 | address-line2 | ー | ー | ◯ 2つめの「以降の住所」に入力した内容が入る |
✗ |
| 電話番号 | tel | ◯ | ー | ◯ | ◯ |
| カード番号 | cc-number | ◯ | ー | ◯ | ◯ |
| セキュリティコード | cc-csc | ◯ | ー | ◯ | ー 入力欄なし |
| 有効期限（年） | cc-exp-year | ◯ | ー | ◯ | ◯ |
| 有効期限（月） | cc-exp-month | ◯ | ー | ◯ | ◯ |
スマホ
検証環境
| 項目 | 指定した値 | Android Chrome Chrome 131.0.6778.82 |
iPhone Safari |
|---|---|---|---|
| 姓 | family-name | ◯ | ◯ |
| 名 | given-name | ◯ | ◯ |
| 郵便番号 | postal-code | ◯ | ◯ |
| 住所1 | address-line1 | ◯ 「番地」に入力した内容が入る |
◯ 「以降の住所」に入力した内容が入る |
| 住所2 | address-line2 | ◯ 「番地」に入力かつ改行していると入る |
◯ 2つめの「以降の住所」に入力した内容が入る |
| 電話番号 | tel | ◯ | ◯ |
| カード番号 | cc-number | ◯ | ◯ |
| セキュリティコード | cc-csc | ◯ | ◯ |
| 有効期限（年） | cc-exp-year | ◯ | ◯ |
| 有効期限（月） | cc-exp-month | ◯ | ◯ |
概ねどの値も想定通りに値が入ることを確認できました。
おわりに
いかがでしたでしょうか？
autocompleteについては、一度2020年頃に社内向けで調査したものを今回、再調査してまとめたのですが、当時は海外の文化の関係で姓名が逆転していたり、電話番号についての設定もtelしかなく、国際番号が入ってしまって使いにくい印象がありました。ですが、姓名の逆転が解消されていたり、電話番号に指定できる値も増えていて、より便利になってきている印象を受けました。
autocompleteについてはうまくいかないことも多いですが、ユーザーの利便性向上のために頑張っていきたいものです。
この記事で紹介したautocompleteの設定をぜひご自身のプロジェクトでも試してみてください！
もっと詳しく学びたい方は、以下の参考サイトをご覧ください。