HTML
input の autocomplete が効かない
inputのautocomplete属性が効かない
こんな症状
autocomplete='off'を指定してもブラウザが自動入力してくる。ブラウザの仕様を理解しよう。
まず試す
autocomplete="new-password" を使う（新規パスワード欄として扱われ自動入力されにくい）。
html
<input type="password" autocomplete="new-password" />これで直らなければ、下の「自分のケース」を確認。
🔍 自分のケースはどれ？
- ✓autocomplete='off' が無視される
→ autocomplete="new-password" を使う。 - ✓name が一般的で記憶されやすい
→ name 属性をユニークな値にする。 - ✓それでも自動入力される
→ readonly を付けて focus 時に解除する回避策もある。
なぜ起きる？
多くのブラウザはセキュリティ上の理由でautocomplete='off'を無視することがあるよ。特にログインフォームのパスワード欄は、ブラウザが強制的に自動入力する仕様になっている。
✕ エラーが起きるコード
<input type="password" autocomplete="off" />
<!-- ブラウザが無視して自動入力する -->✓ 直したコード
<input type="password" autocomplete="new-password" />
<!-- new-passwordなら新規入力として扱われる -->✅ 直ったか確認
ページを開いたときに該当欄が自動入力されなければOK。
この解決法は役立ちましたか？
🔗 関連するエラー
- input要素のtype属性ミスで入力欄が意図通りにならない — type属性のスペルミス
- required属性が効かない（フォームバリデーション） — 送信のしかたがバリデーションを通っていない
- loading="lazy"が効かない — ファーストビューの画像に指定している
- 画像が遅延読み込みされない — loading="lazy" が効いていない
- metaタグのviewportが効かない — viewport の指定が間違っている
📖 この問題を学べるレッスン
✏️ 手を動かして練習
📝 関連ブログ記事
- プログラミングのエラーメッセージの読み方 — エラーの読み方を基礎から解説
- HTMLとは？初心者向けにわかりやすく解説 — タグの書き方・ページ構造の基本
- HTMLのパス（相対パス・絶対パス）の書き方 — パスの書き方を初心者向けに解説