autocomplete 属性

autocomplete 属性はオートコンプリートの可否を指定します。form 要素で使用される場合、下記の2つの値が指定できます。

属性値	挙動
on	フォーム内にある入力コントロールの オートフィルがデフォルトで on に設定されます。（初期値）
off	フォーム内にある入力コントロールの オートフィルがデフォルトで off に設定されます。

input 要素、textarea 要素で使用される場合、下記の値が指定できます。

属性値	挙動
on	オートコンプリートを行うことを許可します。 （初期値）
off	オートコンプリートを行いません。ただし、ユーザーエージェントに依存するため、オートコンプリートを完全に抑制することができない場合もあります。
オートフィル詳細トークン	具体的にどのような情報をオートコンプリートするかを空白で区切った文字列（トークンリスト）で指定します。type="hidden" が指定された input 要素には、このトークンリストのみ指定可能です。 詳細は下記で説明します。

オートフィル詳細トークン

オートフィル詳細トークンは、下記の順番で指定することができます。各トークンは、空白文字で区切ります。

なお、トークンは入力コントロールの内容に適したものを選択しなければなりません。例えば、「名前」の入力欄に autocomplete="email" などと指定してはいけません。

1. フィールドが名前付きグループに属することを意味する、section- から始まるトークンを任意で。同じトークンで始まる入力コントロールは、すべてその名前付きグループに属します。
2. 下記のいずれかのトークンを任意で1つ
   • shipping： フィールドが配送先住所や連絡先情報の一部であることを意味する
   • billing： フィールドが請求先住所や連絡先情報の一部であることを意味する
3. 次の2つのオプションについていずれか
   1. 以下のオートフィルフィールド名のいずれか
      
      • name： フルネーム
        • honorific-prefix： 敬称や称号（Mr. や Ms. など）
        • given-name： ファーストネーム（名）
        • additional-name： ミドルネーム
        • family-name： ファミリーネーム（苗字）
        • honorific-suffix： 接尾辞や敬称 (Jr. など）
      • nickname： ハンドルネームやニックネーム
      • username： ユーザー名
      • new-password： 新しいパスワード（新規アカウント作成時やパスワード変更時など）
      • current-password： 現在のパスワード
      • one-time-code： ワンタイムコード
      • organization-title： 職種
      • organization： 会社名
      • street-address： 住所（複数行で改行が保持されるもの）
        • address-line1： 住所の各行
        • address-line2： 住所の各行
        • address-line3： 住所の各行
      • address-level4： 住所が4段階まである場合のもっとも細かい行政レベル
      • address-level3： 3番目の行政レベル（日本であれば地区）
      • address-level2： 2番目の行政レベル（日本であれば市区町村）
      • address-level1： 最上位の行政レベル（日本であれば都道府県）
      • country： 国コード（日本であれば jp など、ISO 3166-1 alpha-2 コード）
      • country-name： 国名
      • postal-code： 郵便番号
      • 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： 決済手段の種類
      • transaction-currency： ユーザーが取引で希望する通貨
      • transaction-amount： 支払い金額（通貨の単位を含まない数値）
      • language： 優先言語
      • bday： 誕生日
        • bday-day： 誕生日（日）
        • bday-month： 誕生日（月）
        • bday-year： 誕生日（年）
      • sex： 性別
      • url： ウェブページの URL
      • photo： 写真やアイコンなどの画像
   2. 以下の2つを次に記載する順序で
      1. 下記のいずれかのトークンを任意で1つ
         • home： フィールドが自宅に連絡するためのものであることを意味する
         • work： フィールドが職場に連絡するためのものであることを意味する
         • mobile： フィールドが場所に関係なく連絡するためのものであることを意味する
         • fax： フィールドが Fax 機の連絡先情報であることを意味する
         • pager： フィールドがポケットベルの連絡先情報であることを意味する
      2. 以下のオートフィルフィールド名のいずれかを1つ
         • tel： 国番号を含む完全な電話番号
           
           • tel-country-code： 国番号（日本であれば 81）
           • tel-national： 国番号以外の部分の電話番号全体（例えば 03-xxxx-xxxx など）
           • tel-area-code： 市外局番
           • tel-local： 市外局番を含まない電話番号
           • tel-local-prefix： 市内局番
           • tel-local-suffix： 加入者番号
         • tel-extension： 内線番号
         • email： メールアドレス
         • impp： インスタントメッセージングプロトコルのエンドポイントを表すURL

例えば下記のような指定が可能です。

<!-- オートコンプリートを無効にする、あるいは有効にする -->
<input ...略... autocomplete="off">
<input ...略... autocomplete="on">

<!-- オートフィル詳細トークンの指定例 -->

<!-- 「名前（フルネーム）」や「メールアドレス」をオートフィル -->
<input ...略... type="text" autocomplete="name">
<input ...略... type="email" autocomplete="email">

<!-- 配送先住所や連絡先情報における「住所」をオートフィル -->
<textarea ...略... autocomplete="shipping street-address"></textarea>

<!-- 「section-blue」という名前付きグループで、請求先住所や連絡先情報における「郵便番号」や「住所」をオートフィル -->
<input ...略... autocomplete="section-blue billing postal-code">
<textarea ...略... autocomplete="section-blue billing street-address"></textarea>

<!-- 「職場」の「電話番号」をオートフィル -->
<input ...略... type="tel" autocomplete="work tel">