フォーム(user-submittable form)は、HTMLタグでは<form>タグで表されます。フォーム自体はウィジェットではないですが、フォーム内にはデータを入力するためのウィジェットを表示できます。それとフォームは以下のことを同時に設定できます。
●同時にサーバーへ送信されるデータのまとまり
●データの送信方法
<form>内には、データを入力するためのフィールドが配置されます。例と挙げると、ログイン画面に配置されたユーザーIDとパスワードを入力する部分はテキスト入力フィールドといいます。フィールドは１つのフォーム内に複数配置されることがよくあり、入力フィールドだけではなく、データ送信ボタンを設定することもあります。これらのデザインはいずれも作成されたHTMLをもとにし自動的に設定されます。フォーム内のフィールドに同じテーマを設定したいときは、<form class="ui-body ui-body-a">と書きます。
サンプルコードの実行結果はこちら
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<!DOCTYPE html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQueryMobile フォームの作成</title> <link rel="stylesheet" href="../js/jquery.mobile-1.4.5.css"> <script src="../js/jquery-1.11.3.js"></script> <script src="../js/jquery.mobile-1.4.5.js"></script> </head> <body> <section id="page" data-role="page"> <header data-role="header"> <h1>ヘッダ</h1> </header> <article data-role="content"> <form action="login" class="ui-body ui-body-c"> <fieldset> <legend>Login</legend> <label for="username">UserName</label> <input id="username" type="text"> <label for="pw">PassWord</label> <input id="pw" type="password"> <input type="submit" value="送信"> </fieldset> </form> </article> <footer data-role="footer"> <h1>フッタ</h1> </footer> </section> </body> </html> |
データ送信方法を設定したいときは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文書に設定されたものになります。