入力フォームにリセットボタンは不要だが……

入力フォームに「リセット」ボタンは不要です。入力した内容を全部一気に消し去りたいと思うケースは滅多にないのに対して、誤って押してしまった場合のダメージが大きいからです。

フォームのリセットボタンを押すと、そのフォーム内に存在する全ての入力欄で、入力内容が消えて(または初期値に戻って)しまいます。そのため、リセットボタンの存在はユーザビリティ面で好ましくありません。入力フォームは、リセットボタンを配置しなくても作成可能なのですから、リセットボタンは配置しないで済むなら配置しない方が良いでしょう。

しかし、どうしてもリセットボタンを表示する必要があることもあるかも知れません。例えばクライアントにそう要求された場合とか。(^_^;)

リセットボタンをどうしても掲載する必要があるなら、せめて誤操作による全削除を防げるような仕組みを加える安全策を採っておきましょう。
具体的には、ユーザが「リセット」ボタンを押したら、「本当にすべて削除してもよろしいですか？」という確認ダイアログを表示させます。こうしておけば、誤って押してしまった場合でもいきなりすべてが削除されてしまようなことは避けられます。

「リセット」ボタンに確認ダイアログの表示機能を付加するのは、そんなに大変ではありません。むしろ簡単です。
その方法を以下でご紹介いたします。

リセットしても良いかどうかを確認するダイアログが出るリセットボタンの例

まずは動作サンプルを掲載しておきます。

上記のテキスト入力欄に何か適当な文字列を入力した後、「リセット」ボタンをクリックしてみて下さい。
JavaScriptが有効な環境であれば、「リセットボタンがクリックされました。本当に入力内容を削除してもよろしいですか？」という質問と共に「OK／キャンセル」のボタンがある確認ダイアログが表示されます。

その確認ダイアログで「OK」をクリックすればリセット操作が実行されて入力欄の内容は消えます。「キャンセル」をクリックすればリセット操作は行われず入力内容はそのまま維持されます。
これなら、ユーザが誤ってリセットボタンをクリックしてしまっても、その後の確認ダイアログでリセット処理を中止できて安心です。

※とはいえ、確認ダイアログが表示されても、勢い余って[Enter]キーを押してしまうなどで「OK」ボタンを押した取り扱いになってしまえば、入力内容は消えてしまうわけですが。(だからこそ、リセットボタンは表示しない方が望ましいわけです。)

フォームのリセットボタンにJavaScriptで確認機能を加える方法

リセットボタンに確認機能を付加するソースは非常に簡単で、以下のように記述するだけです。(以下は、確認機能付きリセットボタンを作るHTML＆JavaScriptソースです。)

<input type="reset" value="リセット(クリア)"
       onclick="return confirm('リセットボタンがクリックされました。本当に入力内容を削除してもよろしいですか？');">

たったこれだけです。

リセットボタン自体は、HTMLでinput要素のtype属性に値resetを指定することで作れます。
ボタンの表面に表示する文字列は、value属性の値で指定できます。
そのinput要素にonclick属性を加えて、確認ダイアログを表示するJavaScriptを記述しています。

確認ダイアログを表示するconfirmメソッド

確認ダイアログを表示するconfirmメソッドについては、別途『「OK/キャンセル」ダイアログを表示して確認・分岐する方法』で解説していますのでそちらをご参照下さい。
しかし、簡単に紹介しておくと、以下のように記述します。

onclick="return confirm('質問文');"

confirmメソッドは、[OK]ボタンと[キャンセル]ボタンのある確認ダイアログを表示するメソッドで、2つのボタンに併せて「引数に指定された文字列」も表示します。
また、[OK]ボタンがクリックされるとtrueを返し、[キャンセル]ボタンがクリックされるとfalseを返します。
なので、confirmメソッドから返ってくる値をそのまま(onclick属性内のJavaScriptで)返すことで、[キャンセル]ボタンがクリックされた際には、リセット操作も同時にキャンセルさせることができます。

※onclick属性の値の先頭に「return」と書くのを忘れないように注意して下さい。これがないと、確認ダイアログで選択された結果が何にも反映されず、問答無用でリセット機能が働いてしまいます。

というわけで、このような、「確認機能付きリセットボタン」であれば、多少はユーザビリティ面でマシになるのではないかと思います。(最も良いのは、余計なリセットボタンは最初から表示しないことですが。)
なお、JavaScriptが無効な環境では、確認機能が実行されず、問答無用でリセットされてしまうので注意が必要です。(確認機能はJavaScriptですが、リセットボタンの機能そのものはHTMLの機能ですから。)

(更新日：2017年06月10日)