ラジオボタン
ラジオボタンは、スマートフォンでは非常に使いにくいフォーム部品の1つですが、jQuery Mobileを使うと指で選択しやすい形状に最適化できます。type属性に「check」を指定したinput要素をそれぞれlabel要素で関連付けし、data-role属性「controlgroup」を指定したfiledset要素で包みます。filedset要素の冒頭にはlegend要素で項目名を指定します。
■サンプル16[HTML]
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>購入回数</legend>
<input type="radio" name="number" id="n1" value="1回" checked="checked" />
<label for="n1">1回</label>
<input type="radio" name="number" id="n2" value="2回" />
<label for="n2">2回</label>
<input type="radio" name="number" id="n3" value="3回" />
<label for="n3">3回</label>
<input type="radio" name="number" id="n4" value="4回" />
<label for="n4">4回以上</label>
</fieldset>
</div>
jQuery Mobileにより最適化されたラジオボタン
ラジオボタンはデフォルトでは縦に表示されますが、fieldset要素にdata-type属性「horizontal」を指定すると、横（水平方向）に並んだボタンにもできます。
■サンプル17[HTML]
<fieldset data-role="controlgroup" data-type="horizontal">
横に並べたボタン。ただし、ボタンの数や文字数が多いと下に落ちてしまう
ボタンが1行に収まらない場合は、次のようにCSSで余白を調整すると収められます。
■サンプル18[CSS]
.ui-controlgroup .ui-radio .ui-btn-inner{
/*ボタンの左右の余白を25pxから15pxに変更している*/
padding: .6em 15px;
}
CSSで1行に収まるように調整した状態
ただし、スマートフォンでは上下移動のストレスは少ないので、無理に横方向に並べる必要はありません。特に理由がなければ、縦方向に並べればよいでしょう。
チェックボックス
jQuery Mobileではチェックボックスも使いやすいUIで表示できます。基本的な使い方はラジオボタンと同じです。
■サンプル19[HTML]
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>お問い合わせ種別</legend>
<input type="checkbox" name="type1" id="type1" value="HP新規作成">
<label for="type1">HP新規作成</label>
<input type="checkbox" name="type2" id="type2" value="HPリニューアル">
<label for="type2">HPリニューアル</label>
<input type="checkbox" name="type3" id="type3" value="システム開発">
<label for="type3">システム開発</label>
<input type="checkbox" name="type4" id="type4" value="コンサルティング">
<label for="type4">コンサルティング</label>
</fieldset>
</div>
最適化したチェックボックス(左)と項目が選択された状態(右)
fieldset要素にdata-type属性「horizontal」を指定すると、ラジオボタンと同様、横並びにできます。
セレクトメニュー
select要素を使ったセレクトメニューの最適化も簡単です。特に、Androidのブラウザではセレクトメニューが非常に小さいので、jQuery Mobileで最適化することでユーザビリティーを向上できます。
■サンプル20[HTML]
<div data-role="fieldcontain">
<label for="number">購入回数</label>
<select name="number" id="number">
<option value="">選択してください</option>
<option value="n1">1回</option>
<option value="n2">2回</option>
<option value="n3">3回</option>
<option value="n4">4回以上</option>
</select>
</div>
最適化したセレクトメニュー
さらに、jQuery Mobile独自のカスタムセレクトメニューも利用できます。カスタムセレクトメニューを利用するには、select要素にdata-native-menu属性「false」を指定します。
■サンプル21[HTML]
<select name="number" id="number" data-native-menu="false">
jQuery Mobileのカスタムセレクトメニュー、ボタンをタップするとメニューが表示されるようになる
カスタムセレクトメニューでは、option要素のvalue属性の値が空／option要素の中にテキストがない／data-pleceholder属性に「true」が指定されている、のいずれのかの場合、その項目が見出しとして機能します。サンプル21では、最初のoption要素である「<option value="">選択してください</option>」が見出しとなり、項目としては選択できません。
カスタムセレクトメニューでは、multiple属性による複数選択も設定できます（サンプル22）。
■サンプル22[HTML]
<div data-role="fieldcontain">
<label for="type">お問い合わせ種別</label>
<select name="type" id="type" multiple="multiple" data-native-menu="false">
<option value="">選択してください</option>
<option value="HP新規作成">HP新規作成</option>
<option value="HPリニューアル">HPリニューアル</option>
<option value="システム開発">システム開発</option>
<option value="コンサルティング">コンサルティング</option>
</select>
</div>
multipleにより複数選択可能なカスタムメニューが作成できる
