ホームページ作成/Webサイトのユーザビリティ

フォーム上のリセットボタンはデメリット大(3ページ目)

入力フォームには、送信ボタンのほかにリセットボタンを配置することができます。しかし、このリセットボタンは、配置しない方が望ましい『デメリットの大きな』機能です。その理由とリセット機能の対策を解説。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

対策2:リセット機能を無効にする

リセットボタンを消しても、IEでは[ESC]キーでリセットできてしまいます。 これを防ぐには、スクリプトを使ってリセット機能を無効にします。
スクリプトと言っても難しいものではなく、フォームを作るHTML内に少し追記するだけで簡単に実現できます。

<form action="***" onreset="return false;">
   ~~~ 入力欄いろいろ ~~~
   <input type="submit" value="送信する">
</form>

上記のように、formタグ内に「 onreset 」属性を加えて、値に「 return false; 」と記述するだけです。
これだけで、リセット機能を無効にできます。

下記のフォームは、上記のソースを使ったものです。 Internet Explorerで複数の項目に何か適当な文字を入力してから、[ESC]キーを押してみて下さい。2回押してもリセット機能は働かず、すべての項目の入力内容が一斉に消えてしまうことはありません。
※JavaScriptが有効になっている場合のみ

入力欄1:
入力欄2:
コメント欄:

ただし、[ESC]キーを1回だけ押したときに、フォーカスのある入力欄の入力内容は消えてしまいます。これは防げません。
※フォーカスがあっても、入力直後でなければ消えません。(入力後に一旦他の入力欄にフォーカスを移し、その後フォーカスを戻してから[ESC]キーを押しても内容は消えません。その場合は、変更した内容だけがリセットされます。)

さて、リセットボタンをどうしても消したくない場合は、リセット機能が働く直前に「本当にリセットしても良いのかどうか」を確認するダイアログを表示させてみましょう。 それによって、誤ってリセットされてしまう可能性を減らせます。

リセット前に確認ダイアログを出す方法へ >>

  • 前のページへ
  • 1
  • 2
  • 3
  • 4
  • 5
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます