スポンサーリンク
スポンサーリンク

jQueryMobileとフォームを組み合わせてみる

フォーム(user-submittable form)は、HTMLタグでは<form>タグで表されます。フォーム自体はウィジェットではないですが、フォーム内にはデータを入力するためのウィジェットを表示できます。それとフォームは以下のことを同時に設定できます。

同時にサーバーへ送信されるデータのまとまり
データの送信方法

<form>内には、データを入力するためのフィールドが配置されます。例と挙げると、ログイン画面に配置されたユーザーIDとパスワードを入力する部分はテキスト入力フィールドといいます。フィールドは1つのフォーム内に複数配置されることがよくあり、入力フィールドだけではなく、データ送信ボタンを設定することもあります。これらのデザインはいずれも作成されたHTMLをもとにし自動的に設定されます。フォーム内のフィールドに同じテーマを設定したいときは、<form class=”ui-body ui-body-a”>と書きます。

サンプルコードの実行結果はこちら

データ送信方法を設定したいときはdata-ajax属性を利用

jQueryMobileのデフォルトでは、<form>によるデータの送信はAjaxで行われ、データ送信後は、<form>のaction属性値で示されたページへ遷移します、なので<form>にはページ遷移のアニメーションを設定するdata-transition,data-direction属性をせっていできます。それとaction属性が<form>に設定されていない場合は、ページに設定されたdata-urlの属性値をもとにして遷移するページが決まります。

このとき、データの送信元(サーバー上で動作しているアプリケーション)からは、次に表示するページの要素を受信しなければなりません、受信した要素は、<form>が書かれているHTML文書に追加されてから表示されます。なので、画面表示の環境は遷移前の状態(CSS、HTMLタグとか、JavaScriptコードとか)が維持されます。

こうしたAjaxページ遷移ではなくて、データ送信後に表示するHTML文書そのものを遷移させたいときは、<form data-ajax=”false”>と書きます。こうすることで、action属性の値で設定された送信元から受信するHTML文書が画面に表示されます。このときは、画面表示の環境が千二語のHTML文書に設定されたものになります。

コメント

タイトルとURLをコピーしました