jQueryのモバイルフォーム入力2024 年の最新の入門チュートリアル。このコースでは jQueryのモバイルテキスト入力ボックス,例,テキスト領域,例,検索入力ボックス,例,ラジオボタン,例,チェックボックス,例,より多くの例,例,例,例,例, について学習できます。
jQueryのモバイルフォーム入力
jQueryのモバイルテキスト入力ボックス
標準のHTMLコーディング要素を介してフィールドを入力して、jQueryのモバイルは、それがより魅力的でモバイルデバイスで使いやすく見せるために自分のスタイルを追加します。 また、新しいHTML5の<input>タイプを使用することができます。
例
<form method="post" action="demo_form.php">
<div class="ui-field-contain">
<label for="fullname">全名:</label>
<input
type="text" name="fullname" id="fullname">
<label
for="bday">生日:</label>
<input type="date" name="bday"
id="bday">
<label for="email">E-mail:</label>
<input type="email" name="email" id="email" placeholder="你的电子邮箱ja">
</div>
</form>
»をお試しください ヒント:入力フィールドの期待値を記述する簡単な説明を指定するために使用するプレースホルダ:
<input placeholder="sometext">
テキスト領域
複数行のテキスト入力は、<TEXTAREA>使用することができます。
注:あなたは、いくつかのテキストを入力すると、テキストフィールドが自動的に新しく追加された行に合わせてサイズ変更されます。
例
<form method="post" action="demo_form.php">
<div class="ui-field-contain">
<label for="info">附加信息:</label>
<textarea
name="addinfo" id="info"></textarea>
</div>
</form>
»をお試しください
検索入力ボックス
= "検索"と入力入力ボックスのタイプは、入力テキストの検索フィールドとして定義されているHTML5で新しく追加されました:
例
<form method="post" action="demo_form.php">
<div class="ui-field-contain">
<label for="search">搜索:</label>
<input
type="search" name="search" id="search">
</div>
</form>
»をお試しください
ラジオボタン
ラジオボタンを使用するときにユーザーが選択オプションのみの限られた数を選択した場合。
ラジオボタンのシリーズを作成するために、タイプ= "ラジオ"と入力し、対応するラベルを追加です。 <フィールドセット>要素で囲まれたラジオボタン。 また、<フィールドセット>のタイトルを定義するために、<伝説>要素を追加することができます。
ヒント:使用データ-役割= "controlgroup」ボタンを一緒に入れて:
例
<form method="post" action="demo_form.php">
<fieldset
data-role="controlgroup">
<legend>Choose your
gender:</legend>
<label
for="male">Male</label>
<input
type="radio" name="gender" id="male" value="male">
<label for="female">Female</label>
<input
type="radio" name="gender" id="female" value="female">
</fieldset>
</form>
»をお試しください
チェックボックス
ユーザーは選択肢の限られた数の内の1つまたは複数のオプションを選択すると、チェックボックスを使用します。
例
<form method="post" action="demo_form.php">
<fieldset
data-role="controlgroup">
<legend>Choose as many
favorite colors as you'd like:</legend>
<label for="red">Red</label>
<input
type="checkbox" name="favcolor" id="red" value="red">
<label for="green">Green</label>
<input
type="checkbox" name="favcolor" id="green" value="green">
<label for="blue">Blue</label>
<input
type="checkbox" name="favcolor" id="blue" value="blue">
</fieldset>
</form>
»をお試しください
より多くの例
横のラジオボタンの組み合わせのため、またはチェックボックスをオンにし、= "横"データ型を使用します。
例
<fieldset data-role="controlgroup" data-type="horizontal">
»をお試しください また、<フィールドセット>で囲まれたオブジェクトフィールドを使用することができます。
例
<div class="ui-field-contain">
<fieldset data-role="controlgroup">
<legend>请选择您的性别:</legend>
</fieldset>
</div>
»をお試しください あなたが事前に選択し、HTMLの<input>を使用チェックされている属性に、ボタンをしたい場合:
例
<input type="radio" checked>
<input type="checkbox" checked>
»をお試しください あなたは、フォーム上で開くことができます:
例
<a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline">表示ポップアップフォームします</a>
<DIVデータ-役割= "ポップアップ" ID = "myPopup"クラス= "UI-コンテンツ」>
<フォームのメソッド= "ポスト"アクション= "demoform.php">
<DIV>
<H3>ログイン情報</ H3>
<= "usrnm"クラス= "UI-隠されたアクセス可能な"のラベル>ユーザ名:</ label>は
<input type = "text" NAME = "ユーザー" ID = "usrnm"プレースホルダ= "ユーザ名">
<ラベル= "PSWD"クラスの= "UI--隠さアクセス可能">パスワード:</ label>は
<入力タイプ= "パスワード"名前= "PASSW" ID = "PSWD"プレースホルダ= "パスワード">
</ DIV>
</フォーム>
</ DIV>
»をお試しください