フォーム
jQuery Mobileでは、さまざまなフォームUIが利用できます。最後に、jQuery MobileのフォームUIをまとめて紹介します。
テキスト入力ボックス
jQuery MobileのフォームUIは、data-role属性「fieldcontain」を指定した要素に包んで記述します。type属性「text」のinput要素を記述すると、次のように表示されます。
■サンプル11[HTML]
<div data-role="fieldcontain">
<label for="name">名前</label>
<input type="text" id="name">
</div>
jQuery Mobileのスタイルで表示された1行入力ボックス
<input type="text">以外に、<input type="password">でも同様の入力フォームが表示されます。また、HTML5で定義されている<input type="email">や<input type="url">、<input type="tel">、<input type="number">でも同様の形状で表示されます。
検索ボックス
HTML5で追加されたtype属性<input type="search">を使うと、虫眼鏡アイコンが付いた検索用の入力フィールドが表示されます。
■サンプル12[HTML]
<div data-role="fieldcontain">
<label for="search">検索</label>
<input type="search" name="search" id="search" value="" />
</div>
type属性「search」では検索用のボックスが表示される
複数行入力ボックス（テキストエリア）
textarea要素を利用した複数行入力ボックスも、jQuery Mobileのスタイルで表示できます。
■サンプル13[HTML]
<div data-role="fieldcontain">
<label for="contact">お問い合わせ内容</label>
<textarea id="contact"></textarea>
</div>
jQuery Mobileのスタイルで表示された複数行入力ボックス
スライダー
HTML5で追加された<input type="range">でスライダーUIを利用できます。value属性にスライダーの初期値、min属性にスライダーの最小値、max属性にスライダーの最大値を指定します。
■サンプル14[HTML]
<div data-role="fieldcontain">
<label for="year">生まれた年</label>
<input type="range" name="year" id="year" value="1980" min="1900" max="2011" />
</div>
サンプル14の場合、初期値が1980になり、1900～2011までの範囲で選択できるスライダーが表示されます。
スライダーで任意の数字が選択できる
jQuery Mobileのスライダーは、スライダーを指で操作して選択するほか、数字を直接入力することもできます。
フリップスイッチ
「フリップスイッチ」とは、2つの選択肢からどちらか1つをタッチ操作で選択できるUIのことです。フリップスイッチは、select要素にdata-role属性「slider」を指定すると利用でき、select要素の内側に2つのoption要素を書いて項目を指定します。
■サンプル15[HTML]
<div data-role="fieldcontain">
<label for="gender">性別</label>
<select name="gender" id="gender" data-role="slider">
<option value="男性">男性</option>
<option value="女性">女性</option>
</select>
</div>
jQuery Mobileで利用できるフリップスイッチ。初期状態では男性(右)が選択されているがボタンをタップかフリックすることでもうひとつの選択肢である女性(左)が選択される
