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

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

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

目次

自動補完をさせる方法

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

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

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

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

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

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

条件1:formタグと送信ボタンがあること

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

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

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

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

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

  • input要素
  • select要素
  • textarea要素

さらにこれらの要素が

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

である必要があります。

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

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

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

  <!-- 条件1: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がない場合に使用できます。

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

  • 東京
    →address-level1
  • 千代田区
    →address-level2
  • 千代田1−1
    →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があること

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

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

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

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

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

そこでおすすめなのが

  • プログラミングスクール
  • 書籍

です。
プログラミングスクールや書籍で学ぶと効率よく学べます。

なぜなら、プログラミングスクールや書籍では「稼ぐ」ために学ぶからです。

プログラミングスクールは最も効率よく学習できます。
受講料金はかかりますが、エンジニアとしての収入を得るとすぐに元は取れます。

あわせて読みたい
デイトラ受講生の口コミや評判の生の声のまとめ 1番いいプログラミングスクールを調べてデイトラが気になっているけど、失敗しないためにデイトラの受講生の口コミや評判などの生の声が必要だと思いませんか? 現役エ...

WEB制作の現場でも使えるコードを効率的に学べるようにおすすめの書籍をまとめておきます。

created by Rinker
¥2,237 (2022/09/26 20:19:57時点 Amazon調べ-詳細)
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次