jQuery Mobileフォーム

jQuery Mobileは自動的にHTMLフォームに優れた、タッチ操作を容易にする外観を追加します。

jQuery Mobileフォーム構造

jQuery MobileはCSSを使用してHTMLフォーム要素のスタイルを設定し、より魅力的で使いやすいようにします。

jQuery Mobileでは、以下のフォームコントロールを使用できます：

  • テキストボックス
  • 検索ボックス
  • ラジオボタン
  • チェックボックス
  • 選択メニュー
  • スライダー
  • リバートスイッチ

jQuery Mobileフォームに関わる際には、以下の情報を理解しておくべきです：

  • <form>要素にはmethodおよびaction属性を設定する必要があります
  • 各フォーム要素にはユニークな「id」属性を設定する必要があります。このidは、サイトのページ内で一意である必要があります。これは、jQuery Mobileの単一ページナビゲーションモデルが多くの異なる「ページ」を同時に表示することを許可しているためです。
  • 各フォーム要素にはラベルがなければなりません。ラベルの for 属性を設定して、要素の id に一致させます。

例

<form method="post" action="demoform.asp">
  <label for="fname">First name:</label>
  <input type="text" name="fname" id="fname">
</form>

実際に試してみてください

ラベルを非表示にするには、クラス ui-hidden-accessible を使用してください。これは、要素の placeholder 属性がラベルの役割を果たす場合によく使用されます：

例

<form method="post" action="demoform.asp">
  <label for="fname" class="ui-hidden-accessible">名前：</label>
  <input type="text" name="fname" id="fname" placeholder="名前...">
</form>

実際に試してみてください

フィールドコンテナ

ラベルとフォーム要素がワイドスクリーン上で正しく表示されるようにするには、data-role="fieldcontain" 属性を持つ <div> や <fieldset> 要素を使用してラベルやフォーム要素を包装してください：

例

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <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>

実際に試してみてください

ヒント：fieldcontain 属性は、ページの幅に基づいてラベルとフォームコントロールのスタイルを設定します。ページの幅が 480px より大きい場合、ラベルとフォームコントロールが同一行に自動的に配置されます。480px 未満の場合、ラベルはフォーム要素の上に配置されます。

ヒント：jQuery Mobile が自動的にクリック可能な要素にスタイルを適用しないようにするには、data-role="none" 属性を使用してください：

例

<label for="fname">First name:</label>
<input type="text" name="fname" id="fname"} data-role="none">

実際に試してみてください

jQuery Mobile でフォームを提出する

ヒント：jQuery Mobile は自動的に AJAX を通じてフォームを提出し、サーバーの応答をアプリケーションの DOM に統合しようとします。