フォームをオートコンプリートさせるためのマークアップをメモしておきます。
autocomplete属性
autocomplete属性を指定しておくことで、ユーザーがあらかじめ設定した情報を自動入力できます。主にメールフォームや通販サイトの住所入力に使われます。
<input type="text" name="name" autocomplete="name" />
<input type="text" name="postalcode" autocomplete="postal-code" />
- name … 姓名
- family-name … 姓
- given-name … 名
- email … メールアドレス
- tel … 電話番号
- postal-code … 郵便番号
- address-level1 … 都道府県
- address-level2 … 市区町村や郡
- address-line1 … 町名や番地
- address-line2 … アパートやマンション名など
- organization … 会社名、団体名
- sex … 性別
- url … URL
- off … 自動入力を無効にする
HTML 属性: autocomplete - HTML: ハイパーテキストマークアップ言語 | MDN
HTML の autocomplete 属性は、ウェブ開発者は入力欄にどの種類の情報が期待されているかをブラウザーに示唆することができるのに加え、ユーザーエージェントがフォーム入力欄の値を埋めるための自動支援を提供する必要があることを指定することができます。
ちなみに、Mac OS Safariだと連絡先の自分のデータを入力できるのですが、電話番号を「携帯電話」にしていると自動入力されませんでした。「自宅」にすると入力されました。
inputmode属性
主にモバイル端末において、入力に使うソフトウェアキーボードを指定できます。電話番号や郵便番号には数字のみ入力できるようにするとユーザーの利便性が良くなります。
<input type="text" name="tel" inputmode="tel" />
<input type="text" name="email" inputmode="email" />
- decimal … 数字、ピリオド、OSによってはマイナス
- numeric … 数字
- tel … 数字、アスタリスク、シャープ
type="tel"でも良い - search … returnキーの代わりに「検索」が表示される
- email … qwertyキーボード、アットマーク
- url … qwertyキーボード、スラッシュ
type="url"でも良い
おまけ：その他の属性
pattern属性
その入力項目が許容する内容を正規表現で指定します。電話番号や郵便番号のバリデーションなどに。
<input type="text" name="postalcode" pattern="\d{3}-?\d{4}" />
title属性
pattern属性を指定した場合、どのように入力すべきかをここに書きます。ブラウザのバリデーションエラーメッセージに使わます（デスクトップ版Chromiumブラウザで確認）。
<input type="text" name="postalcode" pattern="\d{3}-?\d{4}" title="数字で入力してください。ハイフンはあってもなくても構いません。" />