フォームのオートコンプリート機能(入力内容の自動補完)を無効にする方法

フォームのオートコンプリート機能(入力内容の自動補完)を無効にする方法 HTML

システム開発していると、フォームのinput要素のオートコンプリート機能(入力内容の自動補完)を表示させたくない場合があります。
今回はオートコンプリート機能(入力内容の自動補完)を無効にする方法をご紹介します。

無効化の方法

無効化する方法は、autocomplete属性に “off” を指定することで実現できます。

input要素で無効化する方法

<input type="text" id="test" name="test" autocomplete="off">

フォーム全体で無効化する方法

<form method="post" action="" autocomplete="off">

基本的には上記の方法で対応可能ですが、ブラウザによって効果がない場合もあるようです。
効果がない場合はJavaScriptでも可能なようですので、調べてみてください。

まとめ

JavaScriptのカレンダー機能で「Datepicker」があるのですが、オートコンプリート機能(入力内容の自動補完)をoffにしておかないと、以前入力した日付が表示されてしまい、カレンダーを押すことができなくなってしまいます。

このように、フォームのオートコンプリート機能(入力内容の自動補完)はとても便利なものですが、ユーザビリティを考えたときにかえって不便なことがありますので、必要な場合は上記の方法で無効にしてみてください。

タイトルとURLをコピーしました