入力フォームの装飾と調整
サンプル1でひとまず「名前」欄を表示できましたが、ページの見出し（h2要素）とフォームの間には不自然な余白があり、入力フォームの背景色がやや暗いので、デザインを少し調整しましょう。head要素内に次のようなCSSを追加します。
■サンプル2[HTML]
<div data-role="fieldcontain">
<label for="name">名前</label>
<input type="text" id="name">
</div>
■サンプル2[CSS]
/*入力フォームの背景を調整*/
textarea.ui-body-b,input.ui-body-b{
background-color:white;
}
/*見出しとフォーム部品の間の余白を調整*/
.ui-field-contain:first-child{
padding-top:0;
}
ブラウザーで確認すると次のようになります。
CSSで入力フォームを調整した状態
複数行入力ボックスの最適化
次に、「お問い合わせ内容」の項目をマークアップしましょう。「お問い合わせ内容」は複数行入力ボックスですので、textarea要素で記述します。
■サンプル3[HTML]
<div data-role="fieldcontain">
<label for="comment">お問い合わせ内容</label>
<textarea id="comment"></textarea>
</div>
jQuery Mobileで利用できる複数行入力ボックス
この複数行入力ボックスは、入力したテキストの長さに応じて自動的にフォームの高さが変わります。
