フォーム入力時に、一度入力したユーザー名やパスワード、電話番号などを記憶して、次の入力時に自動で補完してくれる機能が『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 ユーザーネーム
メールアドレス email メールアドレス
パスワード 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属性を記述しないとオートコンプリートが機能しないなどの制限もあるので注意が必要です。

1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座