フォーム
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>
<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>
複数行入力ボックス(テキストエリア)
textarea要素を利用した複数行入力ボックスも、jQuery Mobileのスタイルで表示できます。
■サンプル13[HTML]
<div data-role="fieldcontain">
<label for="contact">お問い合わせ内容</label>
<textarea id="contact"></textarea>
</div>
スライダー
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>