それマグで!

知識はカップより、マグでゆっくり頂きます。 takuya_1stのブログ

習慣に早くから配慮した者は、 おそらく人生の実りも大きい。

radioボタン/checkboxが非選択時(未チェック時)、値を送信しないのに対応しデフォルト値を送信するようにする。

radioボタンが選択されていないときに、ブラウザはFormの値を送信しない。
サーバー側で値を拾えなくて困る.
これは困るので対応するには・・・

これだと送信されない

<input type="radio" name="性別"value="女性"    />
<input type="radio" name="性別"value="男性"    />

ユーザーが選択し忘れたらフォームの値どころか、Nameすら送られないので困る.同じ事はチェックボックス(checkbox)にもいえる。

そこで選択項目を増やすんだけど.

かといって,始めから、女性にCheckedつけるのもなんか違うよね.未回答にチェックしておくとユーザーが選択し忘れに気づかないよね.

<input type="radio" name="性別"value="女性"    />
<input type="radio" name="性別"value="男性"    />
<input type="radio" name="性別"value="未回答" checked />

display:none 使えば良いんですよ

hidden より断然オススメなのです

<input type="radio" name="性別"value="女性"    />
<input type="radio" name="性別"value="男性"    />
<input type="radio" name="性別"value=""
                 checked="checked" style="display:none;" />

このハックのミソはスタイルを使うって事.これでデフォルト値が必ずサーバーに送られます.

しかもValue=""(←空)なのでチェック出来ます.
しかもユーザーの見た目には影響しません.素敵!!!

チェックボックスの場合

チェックボックスの場合は、「同名のフォームは後ろが優先」で有るを利用する。

同名項目を作って、対応する。

<input  type="hidden"     name="enabled" value="0">
<input  type="checkbox" name="enabled" value="1">


これをすることで、チェックボックスを未チェック時には、hiddenが使われ、チェックボックスにチェックをしたときはcheckboxが優先される。


小手先のテクニックにすぎな無いが、知ってると知らないでサーバー側の処理が格段に変わってくるので、ぜひとも覚えておくべきテクニックだと思う。