JavaScript | HTML / CSS 連携：フォーム応用－ autocomplete

JavaScript

2026.07.15

autocomplete は「ブラウザに“ここには何の情報が入るか”を教えるための属性」
autocomplete の基本形：「on」「off」だけじゃもったいない
1. 一番シンプルな使い方：on / off
いちばん重要な使い方：「この欄は“何の情報”か」を具体的に指定する
パスワード欄と autocomplete：ここは超重要ポイント
1. 新規登録フォームのパスワード欄
2. ログインフォームのパスワード欄
住所や電話番号にも「意味のある autocomplete」がある
1. 住所フォームの例
セキュリティと autocomplete：「off にした方がいい場面」もある
1. 機密性の高い情報には autocomplete="off" を検討する
JavaScript と autocomplete：フォームの“意味設計”とセットで考える
1. フォームを作るときに「この欄は何の情報か？」を必ず言語化する
autocomplete を使うか迷ったときの判断基準
1. 「この欄は、ユーザーの“どんな種類の情報”を入れる場所か？」
初心者として「autocomplete」で絶対に掴んでほしいこと

autocomplete は「ブラウザに“ここには何の情報が入るか”を教えるための属性」

autocomplete は、 「この入力欄には、ユーザーのどんな情報が入るのか」をブラウザに教えるための属性 です。

ブラウザは、ユーザーが過去に入力した情報（名前・住所・メールアドレスなど）を覚えていて、それを「自動入力（オートコンプリート）」として提案してくれます。

autocomplete を正しく設定すると、

ユーザーがフォームを素早く埋められる
スマホでの入力がかなり楽になる
パスワードマネージャーやブラウザの自動入力機能が正しく動く

というメリットがあります。

逆に、何も考えずに放置すると、

変なところに過去の入力が出てくる
セキュリティ的に好ましくない場面で自動入力される

などの問題も起きます。

「ブラウザに“ここは何の欄か”を教えるためのラベル」それが autocomplete です。

autocomplete の基本形：「on」「off」だけじゃもったいない

一番シンプルな使い方：on / off

<input
  type="text"
  name="username"
  autocomplete="on"
>

autocomplete="on" は、「ブラウザさん、この欄は自動入力してもいいですよ」という意味。

逆に、

<input
  type="text"
  name="secret"
  autocomplete="off"
>

は、「ここには自動入力してほしくないです」という意思表示です。

ただ、本当に大事なのは on/off よりも、 「具体的な種類（email や name など）を指定すること」 です。

いちばん重要な使い方：「この欄は“何の情報”か」を具体的に指定する

メールアドレス欄なら autocomplete="email"

<label for="email">メールアドレス</label>
<input
  type="email"
  id="email"
  name="email"
  autocomplete="email"
  required
>

ここでブラウザに伝えているのは、

「この欄にはユーザーのメールアドレスが入る」
「過去に入力したメールアドレスを候補として出していい」

ということです。

パスワードマネージャーやブラウザは、「これはログイン用のメールアドレスだな」と理解して、適切な候補を出してくれます。

名前欄なら autocomplete="name"

<label for="name">お名前</label>
<input
  type="text"
  id="name"
  name="name"
  autocomplete="name"
  required
>

ここでは、

「この欄にはユーザーのフルネームが入る」

という意味になります。

ブラウザは、過去に入力した「山田太郎」などの名前を候補として出してくれます。

ユーザー名（ログインID）なら autocomplete="username"

<label for="loginId">ログインID</label>
<input
  type="text"
  id="loginId"
  name="login_id"
  autocomplete="username"
  required
>

ここでの autocomplete="username" は、

「これはログイン用のユーザー名（ID）」

という意味です。

パスワードマネージャーは、この欄とパスワード欄をセットで認識してくれます。

パスワード欄と autocomplete：ここは超重要ポイント

新規登録フォームのパスワード欄

<form action="/signup" method="post">
  <label for="email">メールアドレス</label>
  <input
    type="email"
    id="email"
    name="email"
    autocomplete="email"
    required
  >

  <label for="password">パスワード</label>
  <input
    type="password"
    id="password"
    name="password"
    autocomplete="new-password"
    required
  >

  <button type="submit">登録</button>
</form>

ここでのポイントは、

新規登録のときは autocomplete="new-password" を使う
これは「新しくパスワードを作る場面ですよ」という意味

ということです。

パスワードマネージャーは、

強力なパスワードを提案する
それを保存する

という動きをしやすくなります。

ログインフォームのパスワード欄

<form action="/login" method="post">
  <label for="loginEmail">メールアドレス</label>
  <input
    type="email"
    id="loginEmail"
    name="email"
    autocomplete="email"
    required
  >

  <label for="loginPassword">パスワード</label>
  <input
    type="password"
    id="loginPassword"
    name="password"
    autocomplete="current-password"
    required
  >

  <button type="submit">ログイン</button>
</form>

ここでは、

autocomplete="current-password" を使う
「すでに保存されているパスワードを使う場面ですよ」という意味

になります。

新規登録 → new-password ログイン → current-password

この区別をちゃんと付けておくと、ユーザーのパスワード管理体験がかなり良くなります。

住所や電話番号にも「意味のある autocomplete」がある

住所フォームの例

<form>
  <label for="postal">郵便番号</label>
  <input
    type="text"
    id="postal"
    name="postal"
    autocomplete="postal-code"
  >

  <label for="address">住所</label>
  <input
    type="text"
    id="address"
    name="address"
    autocomplete="street-address"
  >

  <label for="tel">電話番号</label>
  <input
    type="tel"
    id="tel"
    name="tel"
    autocomplete="tel"
  >
</form>

ここでの意味は、

postal-code → 郵便番号
street-address → 住所（番地まで含む）
tel → 電話番号

です。

ブラウザは、ユーザーが過去に入力した住所や電話番号を覚えていて、それを自動入力候補として出してくれます。

「この欄には何が入るか」を autocomplete で教えておくと、 ユーザーは“自分の情報を一瞬で埋められるフォーム”を体験できる。

セキュリティと autocomplete：「off にした方がいい場面」もある

機密性の高い情報には autocomplete="off" を検討する

例えば、ワンタイムパスコードや、その場限りの認証コードなど。

<label for="otp">認証コード</label>
<input
  type="text"
  id="otp"
  name="otp"
  autocomplete="off"
  required
>

ここでは、

「この欄には過去の入力を自動で入れないでほしい」

という意思をブラウザに伝えています。

ただし、最近のブラウザはセキュリティポリシーが厳しく、 autocomplete="off" を完全には守らないこともあります。

それでも、

「ここは自動入力の対象ではない」という意図を示す
パスワードマネージャーなどにヒントを与える

という意味で、 autocomplete="off" を付けておく価値はあります。

JavaScript と autocomplete：フォームの“意味設計”とセットで考える

フォームを作るときに「この欄は何の情報か？」を必ず言語化する

例えば、ユーザー登録フォームを作るとします。

<form>
  <input type="text" name="name" autocomplete="name">
  <input type="email" name="email" autocomplete="email">
  <input type="tel" name="tel" autocomplete="tel">
  <input type="password" name="password" autocomplete="new-password">
</form>

ここでやっているのは、

name → ユーザーの名前
email → メールアドレス
tel → 電話番号
password → 新規パスワード

という「意味づけ」を、ブラウザに対して明示していることです。

JavaScript側では、この意味づけを前提にしてロジックを書けます。

例えば、

メールアドレスとパスワードをログイン情報として扱う
名前や電話番号をプロフィール情報として扱う

など。

autocomplete は「ブラウザ向けの意味づけ」。 JavaScriptは「アプリ向けの意味づけ」。 両方を揃えることで、フォーム全体の設計がきれいに整う。

autocomplete を使うか迷ったときの判断基準

「この欄は、ユーザーの“どんな種類の情報”を入れる場所か？」

自分にこう聞いてみてください。

この入力欄は、

メールアドレスか？ → autocomplete="email"
ログインIDか？ → autocomplete="username"
新規パスワードか？ → autocomplete="new-password"
既存パスワードか？ → autocomplete="current-password"
名前か？ → autocomplete="name"
電話番号か？ → autocomplete="tel"
住所か？ → autocomplete="street-address"
郵便番号か？ → autocomplete="postal-code"

どれにも当てはまらないなら、 autocomplete="off" も選択肢です。

「ここには何が入るか？」を自分で言語化できたら、それをそのまま autocomplete に落とし込むイメージです。

初心者として「autocomplete」で絶対に掴んでほしいこと

autocomplete は、「この入力欄には、ユーザーのどんな種類の情報が入るのか」をブラウザに教えて、自動入力やパスワード管理を“気持ちよく・安全に”動かしてもらうための属性です。

on/off だけでなく、email・name・username・new-password・current-password など“意味のある値”を使う
ログインフォームや登録フォームでは、autocomplete を正しく設定するとユーザー体験がかなり良くなる
住所や電話番号にも専用の autocomplete 値がある
機密性の高い欄には autocomplete="off" を検討する
フォームを作るときは「この欄は何の情報か？」を必ず言語化し、それを autocomplete に反映する

あなたがフォームを書くときに、「この入力欄は“ユーザーのどんな情報”を入れる場所で、ブラウザにもそれをちゃんと伝えておくことで、ユーザーの入力体験と安全性が両方よくなるんだよな」とイメージできていたら、もう autocomplete を“よく分からない属性”ではなく、 “ブラウザとアプリが協力してユーザーを楽にするための、意味のラベル”として扱えている状態です。