フォームUIの基本
jQuery Mobileのフォーム機能では、通常のHTMLと同じように、action属性とmethod属性を指定したform要素内にフォーム部品を記述していきます。
<form action="form.php" method="post">
（フォームの内容）
</form>
フォーム部品は、data-role属性に「fieldcontain」を指定した要素で各パーツ（input要素やtextarea要素など）を包んで記述します。
はじめに、お問い合わせフォームの「名前」からマークアップしてみましょう。「名前」は1行テキスト入力フォームですのでinput要素を使い、ラベル部分をlabel要素で記述します。
■サンプル1[HTML]
<div data-role="fieldcontain">
<label for="name">名前</label>
<input type="text" id="name">
</div>
サンプル1を実行すると、jQuery Mobileで定義されているCSSによってフォーム部品が表示されます。
このフォームは、端末の向きに応じてjQuery Mobileがレイアウトを自動的に調整してくれます。縦向き（portrait）のときはラベルの下にフォーム部品が表示され、横向き（landscape）のときはラベルの右にフォーム部品が表示さます。
端末の向きやサイズのよりフォームのレイアウトが変わる
【ワンポイント・メモ】
同一サイト内でのid名の重複に注意
jQuery Mobileのフォームを利用するときに注意したいのが、label要素とフォーム部品とを関連付けるid名の扱いです。
id名はもともと1つの文書内で1つの要素にしか付けられませんが、jQuery Mobileはページ管理にid属性を利用しているので、別のページであってもid名が重複していると誤動作を起こす可能性があります。jQuery Mobileでは同一サイト内で同じid名を使うことは推奨されていませんので、サイト全体でid名が重複しないように注意しましょう。
