Latest web development tutorials

jQueryのモバイルフォーム

jQueryのモバイルは自動的に自動的に触ると、より優しい、それらをより魅力的に見えるように、HTMLフォームにスタイルを追加します。


jQueryのモバイルフォームの構造

jQueryのモバイルは、それらをより魅力的で使いやすくするために、スタイルのHTMLフォーム要素にCSSを使用しています。

jQueryのモバイルでは、次のフォームコントロールを使用することができます。

  • テキスト入力ボックス
  • 検索入力ボックス
  • ラジオボタン
  • チェックボックス
  • [メニュー]
  • スライダー
  • トグルスイッチをフリップ

jQueryのモバイルフォームを使用している場合、あなたが知っている必要があります。

  • <form>要素は、メソッドとaction属性を持っている必要があります
  • 各フォーム要素は、ユニークな "id"属性を持っている必要があります。 IDはサイト全体すべてのページ上で一意でなければなりません。 jQueryのモバイル単一ページナビゲーション機構が提示されているからであるように、同時に異なる複数のページ
  • 各フォーム要素は、ラベルを持っている必要があります。 要素のIDと一致するプロパティの設定]タブ

例

<form method="post" action="demoform.html" >
<label for="fname">姓名: </label>
<input type="text" name="fname" id="fname" >
</form>

»をお試しください

ラベルを非表示にするには、クラスのUI-隠され-アクセスを使用しています。 プレースホルダタグとして要素の属性である場合にこれが頻繁に使用されます。

例

<form method="post" action="demoform.html">
<label for="fname" class="ui-hidden-accessible" >姓名:</label>
<input type="text" name="fname" id="fname" placeholder="姓名...">
</form>

»をお試しください

ヒント：私たちは、データクリア-BTN = "trueを使用することができます」入力ボックス（入力ボックスの右側にあるXアイコン）の内容をクリアするためのボタンを追加するための属性を：

例

<= "fnameに"のラベル>名前：</ label>は
<input type = "text"の名= "fnameに" ID = "fnameに「データクリア-BTN ="真">

»をお試しください
ノート 入力ボックスにクリアボタンの<input>要素は、<TEXTAREA>で使用されるのではなく、インチ 検索ボックスが表示され、アイコンを削除するために、データクリア-BTN = "false"に使用することができ、デフォルトの値が「真」であるデータクリア-BTN。

jQueryのモバイルフォームのアイコン

ボタンのコードは、標準的なHTMLの<input>要素であるフォーム（ボタン、リセット、提出）。 彼らは、自動的にデスクトップに自動的にモバイルデバイスを適応さ、スタイルをレンダリングします。

例

<入力タイプ= "ボタン"値= "ボタン">
<入力タイプ= "リセット"値= "リセットボタン">
<入力タイプ= "提出"値= "送信ボタン">

»をお試しください

<input>ボタンで追加のスタイルを追加する必要がある場合は、次の表のデーターを使用することができます*属性：

プロパティ 値 説明
データ-コーナー 真|偽 ボタンは角を丸めているかどうかを指定します
データアイコン アイコンリファレンスマニュアル 指定ボタンのアイコン
データiconpos 左|右|トップ|ボトム| notext アイコンの場所を指定します
データインライン 真 |偽 インラインボタンかどうかを指定します
データミニ 真 |偽 ミニボタンかどうかを指定します
データの影 真|偽 ボタンは影の効果を追加するかどうかを指定します

アイコンを追加するためのボタン：

<入力タイプ= "ボタン"値= "ボタン">
<入力タイプ= "リセット"値= "リセットボタン">
<入力タイプ= "提出"値= "送信ボタン">

»をお試しください

フィールドコンテナ

：ワイドスクリーンのためのより適切に見えるラベルとフォーム要素を作成するには、ラベル/フォーム要素を囲むいただくか、<フィールドセット>要素を用いて、「UI-フィールド-含ん」クラスの<div>使用されています

例

<form method="post" action="demoform.php">
  <div class="ui-field-contain" >
    <label for="fname">姓:</label>
    <input type="text" name="fname" id="fname">
    <label for="lname">姓:</label>
    <input type="text" name="lname" id="lname">
  </div>
</form>

»をお試しください

ランプ ラベルとフォームコントロールのスタイルを追加するには、ページの幅に基づいてクラスをUI-フィールドが含まれています。 ページの幅が480PXよりも大きい場合には、自動的に同じ行のラベルとフォームコントロールを配置します。 ページの幅が480PX未満である場合、ラベルは、上部フォーム要素上に配置されます。

ヒント：自動的にjQuery Mobileを防止するために、スタイルクリック可能な要素を追加し、使用データ-役割= "なし"属性：

例

<label for="fname">姓名:</label>
<input type="text" name="fname" id="fname" data-role="none" >

»をお試しください

ランプ フォーム送信でjQueryのモバイル

jQueryのモバイルは、自動的にAJAXフォームの送信によって処理、および統合サーバは、アプリケーションのDOMに応答しよう。