2016-08-05

複数入力フォームのEnterキーでの誤送信を防ぐタグの書き方

はじめに

webサイトで複数の入力フォームでの入力途中、漢字変換の後にもう一度Enterキーを押してしまって、入力途中の内容が送信されてしまった、なんて経験はないでしょうか。今回はそのような誤送信を防ぐ入力フォームの書き方についてご紹介したいと思います。

通常の入力フォームの書き方

通常、特別なことがなければ入力フォームは以下のように書くと思います。

HTML

このようにinputを「type="submit"」と記述すると、それだけで入力フォームのデータを引き渡すボタンが作成され便利なのですが、複数の入力フォームがある状態でこうした場合、入力フォームのどれかにカーソルが合わせてある状態でEnterキーを押すと、その時点の全入力データが送信されてしまいます。つまり、一つ目の入力フォームにでEnterキーを押してしまうと、その下の入力フォームが空欄であっても全ての情報が送信されてしまうのです。

このようなことを防ぐためには、次のようにHTMLを記述します。

誤送信を防ぐ入力フォームの書き方

誤送信を防ぐためには、次のように記述します。

HTML

inputを「type="button"」とすることで、ただのボタン部品となり、この状態では押しても何もアクションを起こさない状態になります。そして「onclick="submit();"」とすることで、ボタンをクリックしたときに入力フォームのデータを送信するという設定にします。このようにすることで、ボタンにtabキーでカーソルを合わせてEnterキーを押すか、マウスポインタでボタンを直接押すことがない限り、入力フォームのデータは送信されなくなります。

9/17追記:この方法だと、必須入力が無視されるようです。詳しくはこちらの記事で。

さいごに

このように、簡単に入力フォームの誤送信を防ぐ仕組みを作ることが出来ます。formにmethodを記述していませんが、GETでもPOSTでも使用できます。ただし、入力フォームが一つの場合は効果がないので注意してください。



コメントする(※は必須項目です)













画像認証