HTML 入力フォームのフィールドの提案をオフにするにはどうすればいいですか? 質問する

Question

必要なのは HTMLautocomplete属性を無効にすることです。

ここで autocomplete="off" を設定すると、次の 2 つの効果があります。

ブラウザによって異なるヒューリスティックにより、ブラウザがフィールドデータを保存して、後で同様のフォームで自動補完するのを防止します。ブラウザがフォームデータをセッション履歴にキャッシュするのを防止します。フォームデータがセッション履歴にキャッシュされると、ユーザーがフォームを送信し、[戻る] ボタンをクリックして元のフォームページに戻った後でも、ユーザーが入力した情報が表示されます。

詳しくはこちらMDNネットワーク

以下にその方法の例を示します。

<form action="#" autocomplete="off">
  First name:<input type="text" name="fname"><br> 
  Last name: <input type="text" name="lname"><br> 
  E-mail: <input type="email" name="email" autocomplete="off"><br>
  <input type="submit">
</form>

React フレームワークの場合は、次のように使用します。

<input
    id={field.name}
    className="form-control"
    type="text"
    placeholder={field.name}
    autoComplete="off"
    {...fields}/>

リンク先反応ドキュメント

アップデート1

一部のブラウザが「autocomplete=off」フラグをスキップする問題を修正するアップデートです。

<form action="#" autocomplete="off">
  First name: <input type="text" name="fname" autocomplete="off" readonly onfocus="this.removeAttribute('readonly');"><br> Last name: <input type="text" name="lname" autocomplete="off" readonly onfocus="this.removeAttribute('readonly');"><br> E-mail:
  <input type="email" name="email" autocomplete="off" readonly onfocus="this.removeAttribute('readonly');"><br>
  <input type="submit">
</form>

アップデート2

Chrome バージョン 119.0.6045.200 (公式ビルド) (64 ビット) でまだ作業中 / 2023 年 12 月 12 日にテスト済み。

Answer 1