こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
Webフォームを作成していると、ブラウザが自動的に過去の入力履歴を補完してくれる「オートコンプリート（自動補完）」機能に助けられた経験はありませんか？
たとえば、ログインフォームでユーザー名やパスワードを入力するとき、候補が表示されてクリックするだけで済むあの便利な機能です。
しかし、この自動補完は必ずしもユーザーにとって都合が良いとは限りません。
とくに会員登録フォームや予約フォームなど、第三者が触れる端末で利用されるケースやセキュリティ的な配慮が必要な入力欄では、自動補完によって誤入力や情報漏えいのリスクもあります。
そこで役立つのが、autocomplete属性の制御です。
今回はHTMLで使える autocomplete 属性について、metaタグとの違い、適切な使い方、よくある誤解を初心者にも分かりやすく解説していきます。
autocomplete属性とは？
autocomplete 属性は、ブラウザに対して「このフォームや入力欄を自動補完していいか」を指定するためのHTML属性です。通常は <input> や <form>要素に直接記述します。
基本の書き方は以下の通りです。
<form autocomplete="off"> <input type="text" name="username"> </form> <form autocomplete="off"> に設定すると、フォーム内のすべての入力欄が対象となります。
また、個別の <input>要素にも次のように指定することが可能です。
<input type="email" autocomplete="off"> 使える属性値一覧
autocomplete で使える代表的な値は以下の通りです。- on：自動補完を有効にする（デフォルト）
- off：自動補完を無効にする
- name：名前
- email：メールアドレス
- new-password：新規パスワード入力欄
- current-password：ログイン用パスワード
- postal-code：郵便番号
- tel：電話番号
これらを適切に使うことで、入力支援を最大限に活かすことも、逆に無効化することも可能です。
metaタグとの違い
HTMLの meta タグで autocomplete を制御できると誤解される方もいますが、autocomplete は metaタグではなく input/form タグで制御する属性です。
つまり、以下のような書き方は意味を持ちません。
<meta name="autocomplete" content="off"> <!-- 効果なし --> 実際に効力を持つのは、次のように<form>または<input>要素に指定した場合です。
<form autocomplete="off"> ... </form> autocomplete="off" を使うべきケース
- パスワード入力欄：第三者による不正ログインや誤保存を防止するため。
- 本人確認用のセキュリティコード入力欄：クレジットカードのCVVなど。
- 公衆端末でのフォーム：図書館やカフェの共有PCなど。
- 複数人が使う業務用アカウント：誤補完によるトラブル防止。
autocomplete="off" の注意点
最近のブラウザ（特にChrome）は、autocomplete="off" を記述していても、ログインフォームやクレジットカード入力欄では自動補完を強制的に維持することがあります。
これはユーザーの利便性を重視した仕様変更によるもので、100%の制御は難しくなってきています。
そのため、CSSやJavaScriptと併用してUI設計することも検討しましょう。
まとめ
autocomplete 属性は、ユーザー体験を向上させたり、セキュリティを高めるための重要なHTML属性です。metaタグでは制御できないため、必ず<form>や<input>要素に設定する必要があります。
場面に応じて on と off を適切に使い分けることで、意図しない入力補完を防ぎ、より安全で快適なフォーム設計が可能になります!
自分のフォーム設計がどうなっているか、一度見直してみるとよいかもしれません。
satokotadesignキャンペーン実施中！
