jQuery MobileはHTMLによるフォーム要素をタッチパネルでの操作に適した形に整形します。
構造
フォームは action と method の指定された form タグで囲まれていなければなりません。
<form action="form.php" method="post"> ... </form>
マークアップ作法
jQuery Mobileにおいてフォームを作る場合でも、通常は get や post を指定して一般的なHTTP通信を submit するのが良いでしょう。しかしながら1点だけ注意が必要なのは、各コントロールにつけられた id は、該当ページ内で一意なだけでなく、サイト全体でユニークでなければならないことです。これはjQuery Mobileのナビゲーションシステムが、他のページを同一DOM上にロードする可能性があるためです。そのため id の一意性を保つためには細心の注意が必要です。(また、おそらく label 要素にも for 属性でidを指定しているでしょうから、同様に注意してください)
ミニサイズ要素
よりコンパクトなサイズの要素を作りたい場合、各要素に data-mini=“true” 属性を追加します。これは、ツールバーなどスペースの狭い場所に便利で、なおかつタッチ操作のしやすさを保っています。これをフィールドコンテナに指定することで、複数の要素を同時にミニサイズにすることも出来ます。
<label for="basic">Text Input:</label>
<input type="text" name="name" id="basic" data-mini="true" />
この記述により、通常よりも小さなサイズのテキスト入力ボックスが作られます。
他の要素は、ミニフォーム要素ギャラリー参照。
アクセシビリティを保ったままラベルを隠す
アクセシビリティ確保の観点から、jQuery Mobileでは全てのフォーム要素に意味のある label を付加するようお勧めします。たとえば要素に placeholder 属性を指定してラベル代わりにしているような際は、ラベルを表示させたくないかもしれません。その場合でも、ラベルに ui-hidden-accessible クラスを指定することなどで、ラベルを作成するのが良いでしょう。
<label for="username" class="ui-hidden-accessible">Username:</label>
<input type="text" name="username" id="username" value="" placeholder="Username"/>
フィールドコンテナ内のラベルを隠し、なおかつレイアウトを詰めたい場合などは、コンテナ要素に ui-hide-label クラスを指定します。
<div data-role="fieldcontain" class="ui-hide-label">
<label for="username">Username:</label>
<input type="text" name="username" id="username" value="" placeholder="Username"/>
</div>
いずれの方法を用いても、出力は次のようになります。
notexitle.
こうした方法でラベルを隠しても、スクリーンリーダーなどでは意味が伝えられアクセシビリティを確保できます。
フォーム要素を使用不可にする
全てのjQuery Mobileウィジェットは、ネイティブコントロール同様に標準的な disabled 属性を指定することで使用不可の状態にすることが出来ます。各フォームウィジェットは、一般的に disabled と enabled のメソッドも持っています。以下は、使用不可状態にしたウィジェットのいつくかのサンプルです。
notexitle..
注意が必要なのは、ボタンです。ボタンには button や input 要素により作られたボタンは使用不可にできますが、リンクに data-role=“button” を指定して作られたものは、できません。リンク(あるいは、その他なにかの要素)を使用不可状態にしたい場合は、該当要素に ui-disabled クラスをJavaScriptなどで追加してやれば、メソッドで行うのと同様に使用不可の状態をつくることができます。
フィールドコンテナ
特に広い画面上でのラベルとフォーム要素のスタイルを良くするため、各ラベルとフォーム要素を div や fieldset で囲み、そこに data-role=“fieldcontain” で囲むことをお勧めします。これによって、通常はラベルと入力フィールドは横方向に並べられます。しかしコンテナとなるブロック要素の幅が480ピクセル以下になると、縦方向に並べるようになります。さらにこの場合、コンテナは区切り線を下方向に付加します。
<div data-role="fieldcontain">
<label for="name">Text Input:</label>
<input type="text" name="name" id="name" value="" />
</div>
notexitle.
他のサンプルはフォームギャラリーで見ることができます。
自動初期化
初期設定下でjQuery Mobileは、ネイティブなフォームコントロールを自動的にタッチ端末に最適化されたリッチなコンポーネントに変換します。これは内部的には、フォーム要素をタグ名によって検索し、そこにプラグインを実行することで制御しています。たとえば select 要素が見つかれば “selectmenu” プラグインを適用しますし、 input 要素に type=“checkbox” が指定されていれば “checkboxradio” プラグインを適用します。一度初期化されると、最適化されたコンポーネントは jQuery UI ウィジェットのAPIを使ってプラグラムから操作できるようになります。詳しいオプションやメソッドについては、各プラグインのドキュメントを参照してください。
動的に挿入されたフォーム要素の初期化
もし、新しいマークアップをクライアント側でジェネレートしたり、あるいはAjaxで読み込んだコンテンツをページに挿入するような場合、この新たなマークアップに含まれる要素を自動的に初期化するために create イベントを発行することができます。この方法は、どんな要素(仮にpage要素そのものであっても)にも適用できます。これによって、手動で各プラグインを初期化する手間が省けます。
たとえば、ログインフォームのようなHTMLのブロックがAjaxにより読み込まれたとしましょう。ここに create イベントを発行することで、ここに含まれる全てのウィジェット(inputやbuttonなど)は最適化されたものに変換されます。この場合のコードは、次のようになります。
$( ...new markup that contains widgets... ).appendTo( ".ui-page" ).trigger( "create" );
フォーム要素のリフレッシュ
jQuery Mobileでは、拡張要素のうちいくつかは、単純にスタイルが変えられただけです(inputなど)。しかし一方で select や slider など複雑に構築されネイティブコントロールと同期させながら動作するものもあります。JavaScriptから、こうしたコントロールを更新する場合、まずはネイティブコントロールを操作します。そして次に、コントロールに対して状態が変化したことを知らせるために refresh メソッドを発行しなければなりません。ここに、よくありそうなコントロールを更新して refresh メソッドを呼ぶケースを幾つか例示します。
Checkboxes:
$("input[type='checkbox']").attr("checked",true).checkboxradio("refresh");
Radios:
$("input[type='radio']").attr("checked",true).checkboxradio("refresh");
Selects:
var myselect = $("select#foo");
myselect[0].selectedIndex = 3;
myselect.selectmenu("refresh");
Sliders:
$("input[type=range]").val(60).slider("refresh");
Flip switches (they use slider):
var myswitch = $("select#bar");
myswitch[0].selectedIndex = 1;
myswitch .slider("refresh");
現在、フォームメソッドに refresh メソッドを付けて、包含するコントロール全てを一気にリフレッシュさせるかどうか検討されていますが、将来的な話になります。
自動初期化のキャンセル
もし特定のコントロールをjQuery Mobileによる自動初期化を行わず元のまま残しておきたい場合、その要素に data-role=“none” 属性を設定しておきます。
<label for="foo">
<select name="foo" id="foo" data-role="none">
<option value="a" >A</option>
<option value="b" >B</option>
<option value="c" >C</option>
</select>
あるいは、何らかの理由で属性値を追加したくない場合は、自動初期化を止めるための keepNative オプションをプログラムから指定してやります。この時、この設定は mobileinit イベントの中で行うよう注意して下さい。ページがロードされる度に評価され、初期化前に実行されるイベントです。
$(document).bind('mobileinit',function(){
$.mobile.page.prototype.options.keepNative = "select, input.foo, textarea.bar";
});
ここで select については特別な注意が必要です。先ほどの例では select 要素が含まれた全てのページで初期化停止が行われます。ページ上でネイティブなパフォーマンスやメニューの見た目を保ちたいならば、やはり mobileinit イベントで $.mobile.nativeSelectMenu を true に設定するか、状況に応じて data-native=“true” を指定してください。