*

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

公開日: : 最終更新日:2016/05/09 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文書に設定されたものになります。

スポンサードリンク

関連記事

no image

class属性によりレイアウトとテーマを設定する

ウィジェットが画面に表示されるとき、HTMLタグには様々なclass属性が追加されます。これらはCS

記事を読む

no image

項目リストを設定する

項目リスト(listview)は、ふくすうの項目を列挙するためのウィジェットで、項目には文字列や、画

記事を読む

no image

コンテンツをフルスクリーンで表示する

ヘッダ、フッタにdata-position="fixed"とdata-fullscreen="tru

記事を読む

no image

コンテンツを表示する

コンテンツはそのページのメインとなる情報を表示する部分です。コンテンツはヘッダとフッタの間に配置しま

記事を読む

no image

ダイアログ

ダイアログは、ユーザーに対して警告や注意をひくために、伝えたいことを表示します。ダイアログが表示され

記事を読む

no image

ナビゲーションバーを表示

ナビゲーションバーは、ヘッダ、フッタ内の複数のリンクをボタンのようにして表示するウィジェットです、よ

記事を読む

no image

jQueryMobileカテゴリーで出てくる用語集

jQueryMobileの記事で登場する用語を下記の表にまとめました。学習するときの助けになるかも。

記事を読む

no image

バルーンを表示、項目を分割、折り畳みやポップ内にlistviewを作成する。

バルーンとは、円形の囲みのことで、jQueryMobileでは、その内部に文字列を表示するために、実

記事を読む

no image

ページ遷移時にアニメーションを付けてたり、Ajaxによるアクセスを禁止する

リンクを操作し、あるページから別のページに飛ぶときに、MozillaやWebkitベースのブラウザで

記事を読む

no image

折りたたみを設定する

おりたたみ(collapse)は、予め概要を示す文字列が表示されている領域をクリックかタップすると、

記事を読む

スポンサードリンク

Message

メールアドレスが公開されることはありません。

CAPTCHA


次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">



スポンサードリンク

jQueryMobile
トグルスイッチを設定する

トグルスイッチ(toggle switch)とは、〇型のつまみを左右に

jQueryMobile
項目選択の複数ウィジェットをグループ化する

年月日など、複数のリストから同時に選択したいとき、ウィジェットのグルー

jQueryMobile
<select>により項目選択

ボタンによる選択では、1つの項目だけ選択するか、複数を同時に選択するか

jQueryMobile
値を選択するボタンを表示する

値を選択するボタンは以下の2つがあります。 ・複数の値から1つだ

jQueryMobile
ボタンを設定する

前回の記事では<a data-role="button">

→もっと見る

  • スポンサーリンク

PAGE TOP ↑