jQuery Mobile は、自動的に魅力的でタッチし易いような外観に HTML フォームをスタイルします。
jQuery Mobile は、CSS を使用して HTML フォーム要素にスタイルを設定し、魅力的で使いやすいものにします。
jQuery Mobileでは、次のフォームコントロールを使用できます：
フォームを取扱う上で、次のことを知っておく必要があります：
<form method="post" action="demoform.html">
<label for="fname">First name:</label>
<input type="text" name="fname" id="fname">
</form>
Try it Yourself »チップ: プレースホルダを使用して、入力フィールドの期待する値を表す短いヒントを指定します：
<label for="fname">First name:</label>
<input type="text" name="fname" id="fname" placeholder="First name...">
Try it Yourself »チップ: ラベルを非表示にするには、"ui-hidden-accessible" クラスを使用します。 これは、要素のプレースホルダ属性をラベルとして使用する場合によく使用します：
<label for="fname"
class="ui-hidden-accessible"">First name:</label>
<input type="text" name="fname" id="fname" placeholder="First name...">
Try it Yourself »チップ: 「クリアボタン」（フィールドの内容をクリアする、入力フィールドの右側に表示される X アイコン）を追加するには、 data-clear-btn="true" 属性を追加します：
<label for="fname">First name:</label>
<input type="text" name="fname" id="fname" data-clear-btn="true">
Try it Yourself »「クリアボタン」は、<textarea> を除くすべての <input> 要素に追加できます。 検索フィールドには、この属性がデフォルトで "true" に設定されています。変更するには、単に data-clear-btn="false" と指定するだけです。
フォーム内のボタンは、標準 HTML <input> 要素（button、reset、submit）でコーディングします。 自動的にスタイルが設定され、モバイル・デバイスやデスクトップコンピュータの両方で魅力的で使いやすいものになります：
<input type="button" value="Button">
<input type="reset" value="Reset Button">
<input type="submit" value="Submit Button">
Try it Yourself »<input> ボタンにスタイルを追加するには、以下の表に示す data-* 属性のいずれかを使用します：
太字 の値はデフォルト値を示します。
| 属性 | 値 | 説明 |
|---|---|---|
| data-corners | true | false | ボタンの角を丸くするかどうかを指定する |
| data-icon | Icons Reference | ボタンのアイコンを指定する |
| data-iconpos | left | right | top | bottom | notext | アイコンの位置を指定する |
| data-inline | true | false | ボタンをインラインにするかどうかを指定する |
| data-mini | true | false | ボタンを小さくするかどうかを指定する |
| data-shadow | true | false | ボタンに影を付けるかどうかを指定する |
<input type="submit" value="Submit" data-icon="check" data-iconpos="right" data-inline="true">
Try it Yourself »ラベルやフォーム要素をより幅の広い画面で適切に表示するには、label/form 要素の周りを"ui-field-contain" クラスを持つ <div> か <fieldset> 要素でラップします：
<form method="post" action="demoform.html">
<div class="ui-field-contain">
<label for="fname">First name:</label>
<input type="text" name="fname" id="fname">
<label for="lname">Last name:</label>
<input type="text" name="lname" id="lname">
</div>
</form>
Try it Yourself »"ui-field-contain" クラスのスタイルラベルとフォームコントロールは、ページの幅に基づいています。 ページの幅が480ピクセルより大きい場合は、自動的にフォームコントロールと同じ行にラベルが配置されます。 480ピクセル未満の場合、ラベルはフォーム要素の上に配置されます。
チップ: jQuery Mobile が、タップ可能/クリック可能な要素に自動的にスタイルされるのを抑止するには、 data-role="none" 属性を使用します：
<label for="fname">First name:</label>
<input type="text" name="fname" id="fname" data-role="none">
Try it Yourself »Query Mobile のフォーム送信
jQuery Mobile は、自動的に AJAX を介してフォームの送信を処理し、サーバの応答をアプリケーションの DOM に統合しようとします。