対策4：ボタンの大きさを変更する
どうしてもリセットボタンを配置する必要があって、なおかつスクリプトも使えない場合は、送信ボタンを大きく表示し、リセットボタンを小さく表示しましょう。 リセットボタンよりも送信ボタンの方が大きければ、誤ってクリックされる可能性を減らせます。
※IEの場合、[ESC]キーで押せてしまう問題はまったく解決しませんが。
ボタンの大きさを変更する最も簡単な方法は、ボタンに表示する文字数を増やすことです。
<input type="submit" value="上記の入力内容で送信します">
<input type="reset" value="消去">
<input type="reset" value="消去">
上記のソースでボタンを表示させると、以下のように見えます。
送信ボタンの方が文字が多いので、大きく表示されます。送信ボタンを見誤る可能性は減らせるでしょう。
スタイルシートでボタンの大きさを変える
スタイルシートを用いることでも、ボタンの大きさやボタンに表示される文字列の大きさを自由に変更できます。
<input type="submit" value="上記の入力内容で送信！" style="font-size: 150%; height: 1.8em; width: 350px;">
<input type="reset" value="消去">
<input type="reset" value="消去">
上記では、送信ボタンの装飾として「文字サイズを1.5倍、ボタンの高さを1.8文字分、ボタンの横幅を350ピクセル」になるよう指定しています。
上記のソースを表示すると、以下のように見えます。
※あまり装飾しすぎると、ボタンとして見えにくくなるかも知れませんのでほどほどにしましょう。
おわりに
今回は、フォームにリセットボタンを配置するとデメリットになる点と、その解決策をご紹介いたしました。 何気なく「送信ボタン」と「リセットボタン」を並べて表示させていた方々は、この機会にリセットボタンの配置を見直してみて下さい。
【関連記事】
