名前やメールアドレスの入力欄をクリックしたとき、以前入力した値や登録済みの住所がブラウザから候補として表示された経験はないでしょうか。この「ブラウザが保存した情報による自動補完（オートコンプリート）」を制御するのが autocomplete 属性です。この記事では、autocomplete の基本となる on / off の指定から、住所やクレジットカードなどの代表的な値、パスワードマネージャ向けの current-password と new-password の使い分け、そして autocomplete="off" が効きにくいケースまで、初心者から中級者に向けて丁寧に解説します。
目次
autocomplete 属性とは何か
autocomplete 属性は、フォームの入力欄に対してブラウザが自動補完（オートコンプリート）機能を使ってよいかどうか、また何を補完すればよいかをブラウザに伝えるための属性です。ここでいう自動補完とは、ユーザーが過去に入力した値や、ブラウザに登録済みの氏名・住所・クレジットカード情報などをもとに、入力欄に候補を表示してワンタップで埋められるようにする機能のことです。
この情報を管理しているのはあくまでブラウザ（や連携するパスワードマネージャ）であり、Web サイト側が候補のデータを用意するわけではありません。開発者ができるのは、「この欄は補完してよい」「この欄はメールアドレスだ」といったヒントを autocomplete 属性で与えることまでです。適切なヒントを与えるほど、ブラウザは正確な候補を出しやすくなり、ユーザーの入力の手間が減ります。
datalist（list 属性）との違い
入力候補を出すしくみとして <datalist> と list 属性がありますが、これは autocomplete 属性とはまったくの別物です。混同しやすいので、最初にはっきり区別しておきましょう。
<datalist> は、開発者があらかじめ候補リストを HTML に書いておき、その選択肢を入力欄に表示するしくみです。たとえば「東京・大阪・名古屋」のような、サイト側で決めた固定の候補を見せたいときに使います。候補の中身はサイトが完全にコントロールします。
一方 autocomplete 属性は、ブラウザが保存・管理している情報（過去の入力履歴や登録済みの個人情報）を候補として出すためのものです。候補のデータはブラウザ側にあり、サイトは中身を知ることも指定することもできません。「開発者が候補を用意するのが datalist、ブラウザが持つ情報を使うのが autocomplete」と覚えておくと区別しやすいです。
基本の使い方：on と off の指定
もっとも基本的な使い方は、値に on（補完を許可）または off（補完を無効化）を指定する方法です。autocomplete は <form> 要素にも個々の <input> 要素にも指定でき、フォーム全体でまとめて設定し、必要な欄だけ個別に上書きするという使い方ができます。
<!-- フォーム全体で自動補完を有効にする（既定でも on 相当） -->
<form autocomplete="on">
<label>お名前
<input type="text" name="name">
</label>
<!-- この欄だけ自動補完を無効にする -->
<label>確認用コード
<input type="text" name="code" autocomplete="off">
</label>
</form>フォームに autocomplete="on" を付けると、その中の各入力欄はブラウザの自動補完の対象になります。特に何も指定しなければ、多くのブラウザは自動補完が有効な状態（on 相当）で動きます。逆に、確認コードや使い捨ての値のように補完されると邪魔になる欄には、その <input> に autocomplete="off" を付けて個別に無効化します。<input> 側の指定が <form> 側の指定より優先されるため、このように「全体は on、一部だけ off」という組み合わせが可能です。
入力内容の種類を伝える代表的な値
autocomplete には on / off だけでなく、「この欄はメールアドレス」「この欄は郵便番号」といった入力内容の種類を表すトークンを指定できます。種類を明示すると、ブラウザは登録済みの正しい情報をピンポイントで補完できるようになります。よく使う代表的な値を次の表にまとめます。
| 値 | 補完される内容 |
|---|---|
name | 氏名（フルネーム） |
email | メールアドレス |
tel | 電話番号 |
street-address | 住所（番地を含む全体） |
postal-code | 郵便番号 |
cc-number | クレジットカード番号 |
current-password | 現在のパスワード（ログイン用） |
new-password | 新しく設定するパスワード |
off | 自動補完を無効にする |
使い方は、それぞれの入力欄に対応する値を指定するだけです。氏名・メール・電話・住所を持つ連絡先フォームの例を見てみましょう。
<form>
<label>お名前
<input type="text" name="name" autocomplete="name">
</label>
<label>メールアドレス
<input type="email" name="email" autocomplete="email">
</label>
<label>電話番号
<input type="tel" name="tel" autocomplete="tel">
</label>
<label>郵便番号
<input type="text" name="zip" autocomplete="postal-code">
</label>
<label>住所
<input type="text" name="address" autocomplete="street-address">
</label>
</form>このように各欄の意味を autocomplete で明示しておくと、ブラウザに住所やメールが登録されているユーザーは、フォームをまとめてワンタップで埋められるようになります。入力の手間が大きく減るため、離脱を防ぐうえでも効果的です。
パスワード欄での current-password と new-password の使い分け
パスワード欄では、current-password と new-password の使い分けが特に重要です。これはブラウザやパスワードマネージャに対して、「この欄は既存のパスワードを入れる場所か、それとも新しく作る場所か」を伝えるためのものです。取り違えると、補完やパスワード生成が正しく働かなくなります。
ログインフォームでは current-password を使います。こうするとパスワードマネージャは、保存済みの現在のパスワードを候補として提示します。一方、新規登録やパスワード変更のフォームでは new-password を使います。すると多くのブラウザ・パスワードマネージャは、強力なパスワードの自動生成を提案し、保存済みの古いパスワードで誤って埋めることを避けてくれます。
<!-- ログインフォーム：現在のパスワードを補完 -->
<form>
<input type="email" name="email" autocomplete="username">
<input type="password" name="password" autocomplete="current-password">
</form>
<!-- 新規登録・パスワード変更：新しいパスワードを生成・入力 -->
<form>
<input type="email" name="email" autocomplete="username">
<input type="password" name="new" autocomplete="new-password">
<input type="password" name="confirm" autocomplete="new-password">
</form>パスワード確認用の欄も new-password にしておくと、生成したパスワードを両方の欄に同じように補完してくれます。また、パスワード欄とセットになるメールアドレスやユーザー名の欄には autocomplete="username" を付けておくと、どのアカウントのパスワードかをブラウザが正しく関連付けられ、補完の精度が上がります。
autocomplete=”off” を指定しても補完されてしまうとき
autocomplete="off" を付けたのに、ブラウザが候補を出したり値を自動で埋めたりして「効かない」と感じることがあります。これはバグではなく、ブラウザ側の判断が優先される場合があるためです。理由と対処を分けて見ていきましょう。
ログイン情報の記憶が優先される
特にパスワードやメールアドレスの欄では、多くのブラウザが autocomplete="off" を無視することがあります。これは「ユーザーが自分のパスワードを保存・自動入力できること」を、利便性とセキュリティの観点からブラウザが重視しているためです。off にすればログイン情報の記憶を止められる、とは限らない点を理解しておく必要があります。
意図した欄を無効化したいときは種類を明示する
off が効かない状況で無理に補完を止めようとするより、その欄が何の入力欄なのかを正しく伝えるほうが、結果的に望ましい挙動になることが多いです。たとえば新しいパスワードを設定する欄で古いパスワードが補完されてしまうなら、off ではなく new-password を指定します。こうすればブラウザは「これは新規パスワードの欄だ」と理解し、古い値で埋めることをやめてくれます。「補完を止める」より「正しい種類を教える」を先に検討するのがコツです。
name 属性や type 属性を適切に付ける
ブラウザの自動補完は、autocomplete 属性だけでなく、name 属性や type 属性の値も手がかりにして「この欄が何を入力する場所か」を推測しています。そのため、意味の通る name と適切な type を付けておくと、ブラウザはより正確に補完できるようになります。
たとえばメールアドレスの欄なら type="email"、電話番号なら type="tel" を指定します。name も email や tel のように内容が分かる名前にします。autocomplete でヒントを与えつつ、type と name も揃えておくと、三つの情報が補い合って補完の精度が高まります。逆に、type="text" のまま name="field1" のような意味のない名前だと、ブラウザは何の欄か判断できず、うまく補完できないことがあります。
<!-- 補完されにくい書き方（種類が分からない） -->
<input type="text" name="field1">
<!-- 補完されやすい書き方（type・name・autocomplete が一致） -->
<input type="email" name="email" autocomplete="email">自動補完をきちんと働かせたいときは、まず type と name を意味のあるものにするところから始めましょう。そのうえで autocomplete の値を添えると、ブラウザにとって最も分かりやすいフォームになります。
まとめ
autocomplete 属性は、ブラウザが保存・管理している入力履歴や個人情報をもとにした自動補完を制御するための属性です。開発者が候補を用意する datalist とは別物で、候補のデータはブラウザ側にあります。基本は on / off で、<form> 全体と個々の <input> の両方に指定できます。さらに email や postal-code のような値で入力内容の種類を伝えれば、ブラウザは正しい情報をピンポイントで補完できます。パスワード欄ではログイン用に current-password、新規設定用に new-password を使い分けるのが重要です。off はブラウザの判断で効かないことがあるため、補完を止めるより「正しい種類を教える」ことを優先し、type や name も意味の通る値にしておくと、精度の高い自動補完を実現できます。