2025/01/01

HTMLのautocomplete属性とは？フォーム入力支援の基本から応用まで徹底解説

HTMLのautocomplete属性は、ユーザーがフォームにデータを入力する際、過去に入力した内容やブラウザが推奨する値を候補として表示し、入力の手間を省くための便利な機能です。
この記事では、autocomplete属性の基本的な使い方から、指定できる値の種類、利用する上での注意点までを詳しく解説します。

autocomplete属性とは？その基本

HTMLのautocomplete属性は、ウェブ開発者は入力欄にどの種類の情報が期待されているかをブラウザーに示唆することができるのに加え、ユーザーエージェントがフォーム入力欄の値を埋めるための自動支援を提供する必要があることを指定することができます。
HTML 属性: autocomplete – HTML: ハイパーテキストマークアップ言語 | MDN

なぜautocomplete属性を使うのか？

autocomplete属性を利用する主な目的は、以下の通りです。

ユーザーエクスペリエンスの向上: 入力の手間を減らし、フォームの入力時間を短縮できます。
入力ミスの削減: 過去の入力履歴や推奨値が表示されるため、タイプミスを減らすことができます。
フォームのコンバージョン率向上: スムーズな入力体験は、ユーザーがフォームを完了させる可能性を高めます。

autocomplete属性の指定方法

autocomplete属性は、以下のいずれかの方法で指定します。

form要素への指定

form要素にautocomplete属性を指定すると、そのフォーム内のすべての入力要素にデフォルトの自動補完設定が適用されます。

HTML
<form action="/submit" autocomplete="on">
  <!-- フォーム要素 -->
</form>

個々の入力要素への指定

input、textarea、selectなどの個々の入力要素にautocomplete属性を指定することで、要素ごとに自動補完の設定を細かく制御できます。

HTML
<input type="text" name="name" autocomplete="name">
<input type="email" name="email" autocomplete="email">

個々の入力要素にautocomplete属性が指定されている場合、form要素の設定よりも優先されます。

autocomplete属性で指定できる値の種類

autocomplete属性には、さまざまな値を指定できます。主な値を以下に示します。

大域的なキーワード

on: 自動補完を有効にします（デフォルト）。
off: 自動補完を無効にします。

フィールド名

特定の情報を入力するフィールドであることをブラウザに伝えるために使用します。これにより、ブラウザはより適切な候補を表示できます。以下は代表的なフィールド名の値です。

個人情報:

name: 氏名
honorific-prefix: 敬称 (例: Mr., Ms., Dr.)
given-name: 名
additional-name: ミドルネーム
family-name: 姓
honorific-suffix: 称号 (例: Jr., Sr.)
nickname: ニックネーム
username: ユーザー名
new-password: 新しいパスワード
current-password: 現在のパスワード
organization-title: 役職
organization: 組織名

連絡先情報:

email: メールアドレス
tel: 電話番号 (国コードを含む)
tel-country-code: 国コード
tel-national: 国内電話番号
tel-area-code: 市外局番
tel-local: 市内局番と加入者番号
tel-extension: 内線番号

住所情報:

street-address: 住所 (番地、建物名などを含む完全な住所)
address-line1: 住所1行目
address-line2: 住所2行目
address-line3: 住所3行目
address-level4: 行政区画レベル4 (例: 小区)
address-level3: 行政区画レベル3 (例: 市町村)
address-level2: 行政区画レベル2 (例: 都道府県)
address-level1: 行政区画レベル1 (例: 国)
country: 国名
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: クレジットカードのセキュリティコード (CVVなど)
cc-type: クレジットカードの種類
transaction-currency: 通貨
transaction-amount: 金額

その他:

language: 言語
bday: 誕生日
bday-day: 誕生日の日
bday-month: 誕生日の月
bday-year: 誕生日の年
sex: 性別
url: URL
photo: 写真のURL

グループ化されたフィールド

複数の関連するフィールドをグループ化するために使用します。例えば、配送先住所と請求先住所が異なる場合などに利用します。

shipping: 配送先情報に関連するフィールドであることを示します。
billing: 請求先情報に関連するフィールドであることを示します。

下の例のようにこれらのキーワードと組み合わせて、より詳細な情報を指定できます。

HTML
<input type="text" id="address" name="address"autocomplete="shipping street-address">

autocomplete属性を利用するメリット

autocomplete属性を利用したフォームを用意することで、以下のようなメリットが得られます。

入力時間の短縮: 過去の入力履歴から候補が表示されるため、ユーザーはすべてを入力する必要がなくなります。
入力ミスの軽減: 特にスペルミスが多い名前や住所などの入力で効果を発揮します。
ユーザーエクスペリエンスの向上: フォームの入力がスムーズに進むことで、ユーザーのストレスを軽減し、サイトへの満足度を高めます。
フォームの完了率向上: 入力の負担が減ることで、ユーザーが途中で離脱する可能性を低減できます。

autocomplete属性の注意点とセキュリティ

autocomplete属性は便利な機能ですが、利用する際にはいくつかの注意点とセキュリティに関する考慮事項があります。

autocomplete=”off” の使用

機密性の高い情報（例：クレジットカード番号、セキュリティコード、パスワードなど）を入力するフィールドでは、autocomplete="off" を指定して自動補完を無効にすることが推奨されます。ただし、autocomplete="off" はブラウザによっては完全に無視される場合があるため、過信は禁物です。

セキュリティ上の注意:

パスワードフィールド: autocomplete属性を省略するか、off に設定することが一般的です。ブラウザは通常、パスワードフィールドに対して自動補完を慎重に扱います。
機密情報: クレジットカード情報など、機密性の高い情報を入力するフォームでは、HTTPSを使用するなど、他のセキュリティ対策と併用することが重要です。

ユーザーのプライバシー

自動補完機能は、ユーザーの過去の入力履歴を利用するため、共有のデバイスを使用している場合など、プライバシーに関する懸念が生じる可能性があります。ユーザーに対して、自動補完機能の仕組みとプライバシーへの配慮について説明することが望ましいです。

適切なフィールド名の使用

autocomplete属性に適切なフィールド名を指定することで、ブラウザはより正確な候補を表示できます。これにより、ユーザーエクスペリエンスが向上し、入力ミスも減らすことができます。

autocomplete属性の活用例

autocomplete属性を活用したフォームの記述例をいくつか紹介します。

ログインフォーム

ユーザー名やメールアドレスのフィールドに autocomplete="username" や autocomplete="email" を指定することで、次回ログイン時の入力を容易にできます。パスワードフィールドには autocomplete="current-password" または autocomplete="new-password" を適切に設定します。

HTML
<form action="/login">
  <div>
    <label for="username">ユーザー名</label>
    <input type="text" id="username" name="username" autocomplete="username">
  </div>
  <div>
    <label for="password">パスワード</label>
    <input type="password" id="password" name="password" autocomplete="current-password">
  </div>
  <button type="submit">ログイン</button>
</form>

住所入力フォーム

住所に関連するフィールドに適切な値を指定することで、ユーザーは効率的に住所を入力できます。

HTML
<form action="/signup">
  <div>
    <label for="postal-code">郵便番号</label>
    <input type="text" id="postal-code" name="postal-code" autocomplete="postal-code">
  </div>
  <div>
    <label for="address">住所</label>
    <input type="text" id="address" name="address" autocomplete="address-level1 address-level2 street-address">
  </div>
  <button type="submit">登録</button>
</form>

クレジットカード情報入力フォーム

クレジットカード番号や有効期限などのフィールドには、適切な値を指定しつつ、セキュリティに配慮します。

HTML
<form action="/checkout">
  <div>
    <label for="cc-name">カード名義</label>
    <input type="text" id="cc-name" name="cc-name" autocomplete="cc-name">
  </div>
  <div>
    <label for="cc-number">カード番号</label>
    <input type="text" id="cc-number" name="cc-number" autocomplete="cc-number">
  </div>
  <div>
    <label for="cc-exp-month">有効期限（月）</label>
    <input type="text" id="cc-exp-month" name="cc-exp-month" autocomplete="cc-exp-month">
  </div>
  <div>
    <label for="cc-exp-year">有効期限（年）</label>
    <input type="text" id="cc-exp-year" name="cc-exp-year" autocomplete="cc-exp-year">
  </div>
  <div>
    <label for="cc-csc">セキュリティコード</label>
    <input type="text" id="cc-csc" name="cc-csc" autocomplete="cc-csc">
  </div>
  <button type="submit">購入</button>
</form>

まとめ

HTMLのautocomplete属性は、ユーザーのフォーム入力体験を向上させるための強力なツールです。
適切な値を指定することで、入力の手間を減らし、エラーを防止し、フォームのコンバージョン率を高めることができます。
ただし、セキュリティとプライバシーに関する考慮事項を忘れずに、適切に活用しましょう。
この記事を参考に、autocomplete属性を効果的に活用し、より使いやすいウェブサイトを構築してください。