[解決編]モバイルのradioとcheckboxにvalue=""は使っちゃダメ

Read More

前回のおさらい。

モバイルでradio、あるいはcheckboxにvalue=""を使ってsubmitすると
受け手では"on"という文字列を受け取ることがある

というびっくり仕様が判明。


うーん、やっぱり困るねこれ。
"on"って単語を利用したい時も困るね。


で、前回は解決方法がぱっと思いうかばなかったんだけど、
ほっとくわけにもいかないので今日は少し考えてみた。

それを検証してみようと思う。

今回は結論は最後に書く。
せっかちさんは最後らへんへドーゾ。



さてここでradioを使うような具体的な例を考えてみる。


例えば不動産サイトを作ったとしよう。

その不動産物件を絞るための検索条件として以下のようなradioボタンがあるとする。

[築年数]
・指定しない
・新築
・築3年未満
・築10年未満
・築20年未満
・築20年以上

このHTMLを当たり前に書いた場合以下のようになる。

■送信HTML
絞り込み条件
<form action="receive.php" method="get">
■築年数<br />
<input type="radio" name="build" value="" />指定しない<br />
<input type="radio" name="build" value="0-1" />新築<br />
<input type="radio" name="build" value="0-3" />築3年未満<br />
<input type="radio" name="build" value="0-10" />築10年未満<br />
<input type="radio" name="build" value="0-20" />築20年未満<br />
<input type="radio" name="build" value="20-" />築20年以上<br />
</form>


新築、築3年未満とかのvalueは人によって書き方が違うだろう。
しかもこの書き方だと条件を"指定しない"の時のvalueは"-"でもいいじゃんとか思う人もいるかも知れない。
けど今回は大事なのはそこじゃないので許せ。


で、formデータを受け取るPHPのプログラム側では絞り込み条件で選択された値を$_GET['build']で確認することができる。


今回の例は築年数なので実際に組むことを考えたら、
$_GET['build']を利用するところはSQLへ問い合わせる条件となるだろう。


しかしいきなりSQLの条件に利用するヤツもいないだろうから
以下のような入力値チェックをまず行う。

■入力値チェック
<?php
// 許可する値のリスト
$aryPattern = array(
  1 => '0-1',
  2 => '0-3',
  3 => '0-10',
  4 => '0-20',
  5 => '20-',
);

$err = null;
if(isset($_GET['build']) and !empty($_GET['build'])) {
  if(!in_array($_GET['build'], $aryPattern)) {
    $err = 'エラーがあるよ';
  }// end if
}// end if
?>


このような入力値チェックを行っていた場合、
絞り込み条件に"指定しない"を選択していた時PCだとなんら問題ないけど、
モバイルだと$_GET['build']="on"となることがあるわけだからその人は何度やってもエラーとなる。



と、こんな感じが問題となるパターンの具体例。

これこれ。
こういうパターンが"あり得る"から問題なんだよ。


しかもvalue=""だったら毎回必ず$_GET['build']=onとなるのならまだ良いのだけど、
キャリアによって"on"になるかどうかわからんときたもんだ。


なので、
考え方としては"on"というものに変換される状況をまずなくそうと。


以下のものがその改良版。

■送信HTML(改)
絞り込み条件
<form action="receive.php" method="get">
■築年数<br />
<input type="radio" name="build" value=" " />指定しない<br />
<input type="radio" name="build" value="0-1" />新築<br />
<input type="radio" name="build" value="0-3" />築3年未満<br />
<input type="radio" name="build" value="0-10" />築10年未満<br />
<input type="radio" name="build" value="0-20" />築20年未満<br />
<input type="radio" name="build" value="20-" />築20年以上<br />
</form>

わかりにくいけどvalue=""からvalue=" "(半角空白)になってる。


次にプログラム側でも一工夫。


■入力値チェック(改)
<?php
// 小細工: モバイルのvalue="on"対策
$_GET['build'] = trim($_GET['build']);

// 許可する値のリスト
$aryPattern = array(
  1 => '0-1',
  2 => '0-3',
  3 => '0-10',
  4 => '0-20',
  5 => '20-',
);

$err = null;
if(isset($_GET['build']) and !empty($_GET['build'])) {
  if(!in_array($_GET['build'], $aryPattern)) {
    $err = 'エラーがあるよ';
  }// end if
}// end if
?>



送信するHTML側ではvalue=" "(半角空白)としといて
受信するPHP側でtrim()をしてやる。


一応value="all"とするパターンも考えたのだけど、
それだと"all"という文字列を送りたくなった場合に、
value="all"を別のもの、例えばvalue="none"とかにしなくてはならなくなる。
んまあそれでもいいっちゃいいんだけど。


ただHTML側の統一感もなくなるし、PHP側の小細工もそれによって毎回違うものにしなくてはならないのでめんどい。

逆にvalueで半角空白を送らなければならない状況などないだろうしな。想像できん。





…ん…まてよ。

考えてみたらcheckboxでvalue=""を使う状況ってのが無いような気がしてきた。


だって複数選択する必要(可能性)があるからcheckboxを使っているわけだろ。

そうするとvalue=""ってのはその性質上、"全ての選択状態"か"いずれでもない"って具合にしか使わない。
つまり複数選択できるcheckboxに全選択、あるいは全未選択を設置すること自体おかしい。

そしてradioボタンでvalue=""が使ってあるところは結構限定される。
よく使う場面って男・女の選択とかそんなだろうし。

value=""がないのならradioボタンを使ってても何も問題ないわけで。

で、radioでvalue=""が使ってある所はselect要素で代替すれば解決だな。



と、いうことではい結論。

・モバイルのradioにvalue=""は使うな!
・radioでvalue=""があったらselect要素で代替しろ。
・どうしてもradioでvalue=""を使うならvalue=" "(半角空白)を使え!




うん、優先順位からしてもこれでよい。




--
おまけ。


radioボタン自体が未選択だったときtrim()のとこでnoticeがでるかも。
上に書いたのは所詮すべて机上の空論(爆


あと話は変わるが、
noticeってのは画面出力されないようにしていてもApacheのログには出力されている。

つまりその分サーバに無駄な負荷がかかっている。

できることならnoticeが出ないような組み方が望ましい。


でもnoticeが完全に出ないような組み方って汚いソースコードになるんだよねぇ…


うーんジレンマ。



Comments(3)

1  115ちゃん  2012/03/21 (水) 11:21 ID:XXXXXXXXX
ふむふむ。。。
モバイルって本当めんどくさいわ~。
以後↑のように気をつけます!!
ありがとうございます!!!!!

2  シラサヤ  2012/03/21 (水) 13:41 ID:XXXXXXXXX
参考程度にしといてね。
情報を鵜呑みにせず自分で検証するのも大事よ。

3  115ちゃん  2012/03/27 (火) 16:09 ID:XXXXXXXXX
は~い(汗)


Category "HTML・JS・CSS" の最新記事