HTMLでフォームのオートコンプリートを無効にする方法

HTML でフォーム等を作成する際にオートコンプリートを無効にしてしまいたいケースがありますが、

<form autocomplete="off">...</form>

とするだけでは制御が効かないケースが出てきました。

今回は name 属性をランダムにしたりしない方法でできるだけオートコンプリートを抑制してみようと思います。

aria-autocomplete を指定する

aria-autocomplete にインターフェイスで表示されるように"both"を指定します。

<form autocomplete="off" aria-autocomplete="both">...</form>

スクリーンリーダー及びブラウザの挙動を明示的に制御します。

<form autocomplete="off" aria-autocomplete="both" aria-haspopup="false">
  ...
</form>

Safari 等のブラウザでは入力の自動補完が動作してしまう可能性があるので autocorrect を指定しておきます。

<form
  autocomplete="off"
  aria-autocomplete="both"
  aria-haspopup="false"
  autocorrect="off"
>
  ...
</form>

先頭の文字が大文字になったりするのを防ぐ為に autocapitalize を無効にして制御しておきます。

<form
  autocomplete="off"
  aria-autocomplete="both"
  aria-haspopup="false"
  autocorrect="off"
  autocapitalize="off"
>
  ...
</form>

ブラウザの自動入力の設定を行っている場合などはそれでも form 要素だけでは制限しきれませんが、オートコンプリートを手軽に無効にするのであればこれで概ね制御できるかと思います。

フォーム内の要素数が少ない場合などは

<input type="text" name="hogehogemanju" />

というようにして name 内をフォーム表示の都度ランダムな文字列にしてしまうほうが確実でしょう。