jQuery Mobileのフォーム｜1日でマスターjQuery Mobile初心者の記 (4)

jQuery Mobileの用意されたフォームはCSSも意識せずにスマホらしい見た目になります！

• ボタン
• アイコン
• テキスト
• チェックボックス／ラジオボタン
• セレクトメニュー

ボタン

<input type="submit" value="ログイン" data-theme="b" >
<input type="reset" value="クリア" data-inline="true">
<!-- button要素 --> 
<button>アカウント登録 

上記はinput要素とbutton要素のボタン表示です。 デフォルトではブロック要素のため、inlineで横に並べるための記載方法です。

リンク要素でbutton化は

<a href="#" data-role="button">マニュアル 
<a href="#" data-role="button" 設定

アイコン

jQuery Mobileでは、モバイルアプリでよく使うと思われるアイコンのセットが用意されていました。

<a href="#" data-role="button" data-icon="info">マニュアル 
<a href="#" data-role="button" data-icon="gear">設定

これは特にinlineを指定していませんが、footer要素に入れると自動的に data-inline="true"の状態になり、左側に並びました。 ちなみにヘッダーに入れると、タイトルを挟んで左右に自動的に振り分けられています。

<a href="#" data-role="button" data-icon="info" data-iconpos="right">マニュアル</a>

でアイコンがテキストの右がわの位置に入りました。

フォーム

通常ラベルとフォーム要素をセットで配置すると思いますが、それらのセットをdivまたはfieldsetなどで括り、data-role=“fieldcontain”を指定します。

<div data-role="fieldcontain">
<label for="text">名前:
<input type="text" id="text">
</div>

こんな感じです。

data-role="fieldcontain"はレイアウト崩れを防ぎ、タッチUIのためのマージンとスプリッターを追加してくれます。画面の横幅に応じて、ラベルとフォーム要素が上下、または左右に並ぶようになる、レスポンシブな作り！

その他、チェックボックス、ラジオボタンやボタンなどのグループ化はdata-role="controlgroup"で完了。縦位置表示か横並びの表示かもdata-type="vertical"(縦位置) data-type="horizontal"（横位置）だけで、綺麗にかっこ良くならんでくれます！

いずれも特別なマークアップは必要なく、角丸やシャドウ効果の効いた、いかにもスマホ的なテキストボックスになっています。やはりスマホの画面になれるとこれが普通に見えるから、実はこうでないと入力生産性は上がらないのではないかと感じました。