*

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

ページのURLを設定する

ユーザーにページのURLを知らせる時に使用するのがdata-url属性です。 data-url属性

記事を読む

no image

ボタン内にアイコンを表示したり、デザインを変更する

ボタン内にアイコンを表示するには、リンクと同じように、data-icon属性、data-iconpo

記事を読む

no image

同じHTML文書に複数ページを作成してみる

jQueryMobileでは、同じHTML文書内に複数ページを作成することができます。手順は以下の通

記事を読む

no image

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

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

記事を読む

no image

ボタンを設定する

前回の記事では<a data-role="button">によるボタンを取り上げましたが

記事を読む

no image

アイコンとサムネイルを表示する

各項目のレイアウトを設定する <li>の中には、色々なレイアウトを設定できます。いずれ

記事を読む

no image

移動しないヘッダ、フッタにIDを設定する

MozillaやWebkitベースのブラウザでは、リンクにdata-transition="slid

記事を読む

no image

<select>により項目選択

ボタンによる選択では、1つの項目だけ選択するか、複数を同時に選択するかで、ラジオボタンかチェックボッ

記事を読む

no image

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

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

記事を読む

no image

ヘッダ内、フッタ内にボタンを表示する

ヘッダ内にボタンを表示してみる ヘッダ内にリンクであるaタグを作成すると、それがボタンとして表示さ

記事を読む

スポンサードリンク

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 ↑