2016-08-20

selectの見出しoptionの誤送信を防ぐ

はじめに

プルダウンメニューの先頭に「選択してください」などの見出しを付ける場合があると思いますが、然るべき処置をしておかないと、ユーザーがメニューの操作をせずに情報を送信してしまった場合に、見出しの文字列がそのまま送信されてしまう可能性があります。その対策について、またまたselectに関する記事になってしまいますが、よく使いそうなので書いておきます。

誤送信されてしまう書き方

select及びinputの属性には項目を必須入力にする「required」を設定して、以下のように、見出しは送信されない前提のものとして、ただoptionタグに見出しを書くだけでは、メニューに対してユーザーの操作がないまま送信ボタンを押した場合、見出し文字列が送信されてしまいます。

HTML
画面表示
requiredのみの場合

誤送信を防ぐ書き方

では、どうすればよいのかというと、見出しのoptionタグに「value=""」を設定すれば解決です。こうすることで、selectに設定したrequired属性が反応して、ユーザーがメニューを操作していない場合、警告が表示されて見出しが誤って送信されることがなくなります。

HTML
画面表示
valueを追加した場合

さいごに

ユーザー側が製作側の想定通りに動いてくれるとは限らないので、こんな単純なことでも対策する必要がありますね。なお、見出しが「value=""」の場合は、選択を促すメッセージが表示されますが、見出し以降のoptionに「value=""」と設定しても、警告は出ず空値を送信してしまいます。どうやら、valueが空値の場合に警告が出るのわけではないようで、この方法ではoptionの一段目にしか効果がないので、その点に注意してください。



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













画像認証