フォーム入力時に、一度入力したユーザー名やパスワード、電話番号などを記憶して、次の入力時に自動で補完してくれる機能が『autocomplete』です。
「自動補完機能」などとも呼ばれますね。
今日はその『autocomplete』で指定できる値を紹介します。
自動補完機能autocomplete属性を指定できる要素
autocomplete属性は、type属性に以下の値が指定されている <input> <textarea> <select> 要素に使用できます。
- type=”hidden”
- type=”text”
- type=”search”
- type=”url”
- type=”tel”
- type=”email”
- type=”password”
- type=”date”
- type=”month”
- type=”week”
- type=”time”
- type=”datetime-local”
- type=”number”
- type=”range”
- type=”color”
type属性の値が「hidden」以外のときは、autocomplete属性はユーザーによる入力が予想される情報の種類を示し、ブラウザはautocomplete属性の値を参考にして入力候補を表示します。
autocomplete="on" と指定している場合は、単純に自動補完機能を使って良いということを示し、どのような入力候補を表示するかはtype属性の値などからブラウザが判断します。
autocompleteの設定方法
<input type="email" name="email" autocomplete="email">
上記のコード内「autocomplete=”email”」のemailの部分で入力内容に合わせたautocomplete属性の値を記述します。
以下にautocomplete属性で指定できる値をすべて紹介します。
autocomplete属性の値
| 名前 | name | 名前 |
|---|---|---|
| honorific-prefix | 接頭辞や敬称、肩書など（「Mr.」「Ms.」「Dr.」など） | |
| given-name | 名（ファーストネーム） | |
| additional-name | ミドルネーム | |
| family-name | 苗字（ラストネーム） | |
| honorific-prefix | 名前の後ろの敬称など（「様」「Ⅱ」「Jr」など） | |
| nickname | ニックネーム | |
| username | ユーザーネーム | |
| メールアドレス | メールアドレス | |
| パスワード | new-password | 新しいパスワード |
| current-password | 現在のパスワード | |
| one-time-code | ユーザー自身を確認するために使われるワンタイムコード | |
| 組織 | organization | 企業・団体・組織名 |
| organization-title | 組織内での肩書、役職（「社長」「CEO」など） | |
| 住所 | country | 国コード |
| country-name | 国名 | |
| postal-code | 郵便番号 | |
| address-level1 | 都道府県名（合衆国では州、スイスではカートン、イギリスではポストタウンになる） | |
| address-level2 | 市区町村名 | |
| address-level3 | address-level2の後ろにつく町名 | |
| address-level4 | address-level3の後ろにつく住所 | |
| street-address | 住所の番地など | |
| address-line1 | 住所の番地などを３つに分割したもの。これらは “street-address” が存在しない場合のみ設定可能。 | |
| address-line2 | ||
| address-line3 | ||
| クレジットカード | cc-name | クレジットカード支払者の名前 |
| cc-given-name | クレジットカード支払者の下の名前（ファーストネーム） | |
| cc-additional-name | クレジットカード支払者のミドルネーム | |
| cc-family-name | クレジットカード支払者の苗字（ラストネーム） | |
| cc-number | クレジットカード番号 | |
| cc-exp | クレジットカードの有効期限 | |
| cc-exp-month | クレジットカード有効期限の月 | |
| cc-exp-year | クレジットカード有効期限の年 | |
| cc-csc | クレジットカードのセキュリティコード | |
| cc-type | クレジットカードの種類（Visa, JCB, Master Card など） | |
| 決済 | transaction-currency | 支払い通貨 |
| transaction-amount | 支払額 | |
| language | 言語 | |
| 生年月日 | bday | 生年月日 |
| bday-day | 生年月日の日の部分 | |
| bday-month | 生年月日の月の部分 | |
| bd-year | 生年月日の年の部分 | |
| sex | 性別 | |
| 電話番号 | tel | 電話番号 |
| tel-country-code | 電話番号の国コード | |
| tel-national | 国番号を含まない電話番号 | |
| tel-area-code | 市外局番 | |
| tel-local | 国番号や市外局番を含まない電話番号 | |
| tel-extension | 内線番号 | |
| impp | IMPP（Instant Message and Presence Protocol・インスタントメッセージプロトコル）のURL | |
| url | ウェブサイトなどのURL | |
| photo | 画像の URL |
以上。
なお提案値の情報源はブラウザに依存します。ブラウザによって自動補完する情報が異なったり、同時にname属性を記述しないとオートコンプリートが機能しないなどの制限もあるので注意が必要です。
