【HTML5】ブラウザのオートコンプリート（自動入力）に対応したフォームの作成方法

フォーム入力を快適にするには、ブラウザが備えるオートコンプリート（自動入力）機能に正しく対応させることが重要です。本記事では、HTML5の仕様に基づくautocomplete属性の考え方と、主要なフィールド名の指定方法を解説します。

HTML5仕様におけるオートフィルの仕組み

HTML5の公式仕様では、オートフィルに関する動作が次のように定められています。

オートフィルのフィールド名が「on」である場合、ユーザーエージェント（ブラウザ）は、要素のname属性の値や、文書のDOMにおける要素の位置などに基づくヒューリスティクスを用いて、ユーザーに提示すべき最も適切な値を判断しようとする。

つまり、autocomplete属性に「on」を設定するだけでも、ブラウザはname属性の値や入力欄の配置状況から入力内容を推測して補完を行います。ただし、より確実かつ意図どおりに自動入力を機能させるには、次に紹介する標準化されたフィールド名を明示的に指定するのがおすすめです。

autocomplete属性に指定できる主な値

氏名関連の入力欄には、以下のような値をautocomplete属性として指定できます。

コード記述例

<form action="/submit" method="post">
  <label for="fullname">氏名</label>
  <input type="text" id="fullname" name="name" autocomplete="name">

  <label for="fname">名</label>
  <input type="text" id="fname" name="given-name" autocomplete="given-name">

  <label for="lname">姓</label>
  <input type="text" id="lname" name="family-name" autocomplete="family-name">
</form>

自動入力に確実に対応させるためのポイント

• input要素のname属性とautocomplete属性に、意味が一致する値を設定する
• メールアドレスなら「email」、電話番号なら「tel」など、目的に合った適切なtype属性を選ぶ
• label要素を入力欄と正しく関連付け、ユーザーにもブラウザにも各項目の意味が伝わるようにする

これらの属性を適切に設定することで、ブラウザは保存済みの個人情報を各入力欄へ正確に振り分けられるようになり、ユーザーの入力負担を大幅に軽減できます。特に会員登録や注文フォームなど、入力項目が多い画面では効果が顕著です。