リセットボタンは脱力ボタン
入力フォームの「リセット」ボタンは、入力した内容をすべて破棄するボタンです。 このボタンは、誤ってクリックしてしまうだけでも入力内容がすべて消えてしまう危険なボタンです。
下記のサンプルフォーム内に適当に文字を入力後、「リセット」ボタンをクリックしてみて下さい。入力内容はすべて消えてしまいます。
ユーザが意図的に消したいと思ったのならともかく、そうでない場合に誤って消してしまうと、脱力して再入力する気力をなくしたり、いらだったりする要因になります。 フォームには、リセットボタンは配置しない方が望ましいでしょう。リセットボタンが存在しなければ、押し間違えることもありませんから。
入力した内容をすべて消したいと思う機会はそうそうありません。 また、最初からやり直したいなら、（リセットボタンがなくても）前のページに戻って再度アクセスし直せば済むことです。 送信をやめたいなら、送信ボタンを押さなければ良いだけです。 したがって、「リセット」ボタンの存在意義はほとんどなく、デメリットの方が大きいと言えるでしょう。
※リセットボタンは、正確には「すべてを消す」のではなく「最初の状態に戻す」機能です。 最初の状態が空欄であれば空欄に戻ります。最初から何か入力されていたなら、その文字列に戻ります。
リセット機能が[ESC]キーで実行されてしまう環境もある
Internet Explorerでは、フォームにリセットボタンが配置されている場合、キーボードから[ESC]キーを1回押すだけで「リセット」ボタンを押したことになります。
IEを用いて上記のフォームに何かを入力し、そのまま[ESC]キーを押してみて下さい。 リセットボタンがクリックされたことになり、すべての項目に入力した内容が一気に消えてしまうはずです。
[ESC]キーは、日本語入力中に変換内容を取り消す場合などにもよく使われるキーです。 もし誤って[ESC]キーを押しすぎてしまうと、それだけでフォーム上の入力内容をすべて消してしまうことにもなります。
漢字変換が必要ない入力フォームなら（[ESC]キーを使う機会が少なく）あまり問題にならないかもしれません。 しかし、日本語を入力する可能性のあるフォームでは危険でしょう。
※日本語入力中に[ESC]キーを一切使わない方もいらっしゃるでしょうが。
 |
| ノートPCだと押し間違いも起こりやすい[ESC]キー（左上） |
また、キーボードによっては[半角/全角]キーと[ESC]キーが隣り合って配置されている場合もありますから、[ESC]キーを押す意図がなくても誤って押してしまう可能性があります。 ノートPCのような間隔が詰まっているキーボードでは、数字の[１]キーなどとも隣り合っている場合があり、余計に誤って押してしまう可能性がありそうです。
※[半角/全角]キーは、日本語入力のON/OFFを切り替えるキー。（Windows）
※補足※
Internet Explorerの場合は、フォーム中にリセットボタンが配置されていなくても、[ESC]キーを2回押せばリセットボタンと同様の機能が働いてしまいます。 （この点については後述）
リセットボタンの対策
「送信ボタン」と「リセットボタン」はどちらもHTMLで簡単に作れますから、何も考えずに両方を並べて配置してしまいがちです。 しかし、横に並んでいると、誤ってクリックされる可能性が高まります。 リセットボタンには、以下のような対策を施しておきましょう。
- リセットボタンを配置しない
リセットボタンを配置しなくても入力フォームの機能として何ら問題ありません。表示させなければクリックもされませんから、誤って消えてしまうこともありません。シンプルで確実な解決方法です。（※IEで[ESC]キーを2回押した場合の問題は解決しません） - リセット機能を無効にする
IEで[ESC]キーが押された場合に対処するために、リセット機能を無効にするスクリプトを書いておきましょう。1行書くだけで実現できます。 - 確認ダイアログを出す
リセットボタンをどうしても配置したい場合は、リセット処理が行われる前に消しても構わないかどうかの確認ダイアログを表示させましょう。そうすれば、誤って消してしまう可能性を減らせます。 - 大きさを変える
どうしてもリセットボタンを配置する必要があって、なおかつスクリプトも使えない場合は、送信ボタンを大きく表示し、リセットボタンを小さく表示しましょう。誤ってクリックされる可能性を減らせます。（しかし、[ESC]キーで押せてしまう問題は解決しません）
それでは、上記の対策の実現方法を順に見ていきましょう。
