フォームの自動補完で名前やメールアドレスなどを入力する方法

2022年6月15日

この記事ではブラウザに保存されている情報をフォームに自動補完をする方法をご紹介します。

フォームの自動補完をするとユーザーが情報をスムーズに入力するとができ、申込みや問い合わせなどのコンバージョンを増やす事ができます。

自動補完をさせる方法

ブラウザーが持つ情報を自動補完させるフォームを作るには次の条件があります。

formタグと送信ボタンがあること
formタグの子要素の項目にidやnameがあること

これらを満たし、メールアドレスの自動補完をするフォームは次のサンプルコードになります。

<form
  ...
>
  <input
    type="email"
    name="email"
    autocomplete="email"
  >

  <input type="submit">
</form>

このサンプルコードを使って自動補完されるフォームの条件を詳しく説明します。

条件１：formタグと送信ボタンがあること

自動補完させるにはformタグと送信ボタンが必要です。

サンプルコードでは次の部分でその条件を満たしています。

<!-- 条件１：formタグと送信ボタンがあること-->
<form
  ...
>
  ...
  <!-- 条件１：formタグと送信ボタンがあること -->
  <input type="submit">
</form>

条件２：formタグの子要素の項目にidやnameがあること

自動補完は次のHTMLタグに対して自動補完されます。

input要素
select要素
textarea要素

さらにこれらの要素が

formの子要素であること
idまたはname属性を持つこと

である必要があります。

これらの条件を満たした項目でautocompleteを指定すると自動補完されます。

サンプルコードではメールアドレスの項目を自動補完にしています。

<!-- 条件１：formタグと送信ボタンがあること -->
<form
  ...
>
  ...
  <!-- 条件２：formタグの子要素の項目にidやnameがあること -->
  <input type="email" name="email" autocomplete="email">

  <!-- 条件１：formタグと送信ボタンがあること -->
  <input type="submit">
</form>

autocomplete 属性で使用できる値

よく使う自動補完を次の種類別でまとめました。

アカウント情報
個人情報
住所情報
クレジットカード情報

適切に自動補完を指定することでUXがよくなり、申込みや問い合わせなどのコンバージョン向上が期待できます。

すべての自動補完の値を確認したい場合はこちらを御覧ください。

アカウント情報を自動補完

アカウント情報を自動補完するautocompleteの値は次のとおりです。

値	説明
name	名前
nickname	ニックネーム
email	メールアドレス
username	ユーザー名またはアカウント名
new-password	新しいパスワード
current-password	現在のパスワード

個人情報を自動補完

個人情報を自動補完するautocompleteの値は次のとおりです。

値	説明
organization	企業または団体名
organization-title	肩書（例社長、部長）
bday	生年月日
bday-year	生まれた年
bday-month	生まれた月
bday-day	生まれた日
sex	性別
tel	電話番号

住所情報を自動補完

住所情報を自動補完するautocompleteの値は次のとおりです。

値	説明
country	国コード
country-name	国名
postal-code	郵便番号
address-level1	住所の都道府県
address-level2	住所の市区町村
street-address	市区町村以下の住所
address-line1	町名番地

address-line1（address-line2, address-line3も存在します。）はstreet-addressがない場合に使用できます。

皇居の住所である「東京都千代田区千代田１−１」の場合は

東京
→address-level1
千代田区
→address-level2
千代田１−１
→street-address, address-line1

となります。

クレジットカード情報を自動補完

クレジットカード情報を自動補完するautocompleteの値は次のとおりです。

値	説明
cc-name	クレジットカード記載の氏名
cc-number	クレジットカード番号
cc-exp	クレジットカードの有効期限
cc-exp-month	クレジットカードの有効期限の月
cc-exp-year	クレジットカードの有効期限の年
cc-csc	クレジットカードのセキュリティコード
cc-type	クレジットカードのブランド（例 Visa, Master Card）

すべての項目で自動補完を有効にする方法

また、すべての項目で自動補完をしたい場合は次のサンプルコードのようにformタグのautocomplete属性でonをしていするとフォームのすべての項目で自動補完することができます。

<form
  method="post"
  action="/form"
  autocomplete="on"
>
...
</form>

自動補完を無効にする方法

formまたはinputのautocomplete 属性に “off”を指定するとブラウザーがフォームに対して自動補完をしなくなります。

フォーム内のすべての項目で自動補完させたくない場合は次のサンプルコードのようにform要素のautocomplete属性でoffを指定します。

<form
  method="post"
  action="/form"
  autocomplete="off"
>
...
</form>

フォーム内の特定の項目で自動補完させたくない場合は次のサンプルコードのようにinput要素のautocomplete属性でoffを指定します。

<form
  method="post"
  action="/form"
>
  <input
    ...
    autocomplete="off"
  >
  ...
</form>

まとめ

この記事ではフォームで自動補完する方法をご紹介しました。

自動補完するフォームの条件は次のとおりです。

formタグと送信ボタンがあること
formタグの子要素の項目にidやnameがあること

これの条件を満たした自動補完されるフォームは次のサンプルコードのです。

<!-- 条件１：formタグと送信ボタンがあること -->
<form
  ...
>
  ...
  <!-- 条件２：formタグの子要素の項目にidやnameがあること -->
  <input type="email" name="email" autocomplete="email">

  <!-- 条件１：formタグと送信ボタンがあること -->
  <input type="submit">
</form>

フォームの入力項目を作る方法はProgateなどで無料で学べますが、この記事で紹介した自動補完する方法はProgateなどでは学べません。

しかし、WEB制作の現場ではこれらの方法も知っておかないと要望や仕様通りにコーディングできません。

そこでおすすめなのが