最新のWeb開発のチュートリアル
 

jQuery Mobileフォーム入力要素


jQueryのモバイルテキスト入力

入力フィールドは、標準的なHTML要素で符号化される、とjQuery Mobileは、魅力的で使いやすいモバイルデバイス用の見るためにそれらのスタイルをします。 また、新しいHTML5使用することができます<input>種類を:

<form method="post" action="demoform.asp">
  <div class="ui-field-contain">
    <label for="fullname">Full name:</label>
    <input type="text" name="fullname" id="fullname">

    <label for="bday">Date of Birth:</label>
    <input type="date" name="bday" id="bday">

    <label for="email">E-mail:</label>
    <input type="email" name="email" id="email" placeholder="Your email..">
  </div>
</form>
»それを自分で試してみてください

テキスト領域

使用<textarea>複数行のテキスト入力のために。

注意:テキストエリアが自動的にあなたには、いくつかのテキストを入力すると、新しい行に合わせて成長します。

<label for="info">Additional Information:</label>
<textarea name="addinfo" id="info"></textarea>
»それを自分で試してみてください

検索入力

入力type="search" HTML5で新たに追加され、検索を入力するためのテキストフィールドを定義しています。

<label for="search">Search:</label>
<input type="search" name="search" id="search">
»それを自分で試してみてください

ラジオボタン

ユーザが選択肢の限られた数のいずれかを選択することができるときにラジオボタンが使用されています。

ラジオ・ボタンのセットを作成するには、して入力を追加するtype="radio"とそれに対応するラベル。 ラジオボタンをラップ<fieldset>要素。 また、追加することができ<legend>のキャプションを定義する要素を<fieldset>

ヒント:使用してdata-role="controlgroup" 、グループのボタンを一緒:

<form method="post" action="demoform.asp">
  <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="demoform.asp">
  <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>
»それを自分で試してみてください

その他の例

水平グループのラジオボタンやチェックボックスに、使用するdata-type="horizontal"

<fieldset data-role="controlgroup" data-type="horizontal">
»それを自分で試してみてください

また、周りのフィールドのコンテナをラップすることができます<fieldset>

<div class="ui-field-contain">
  <fieldset data-role="controlgroup">
    <legend>Choose your gender:</legend>
  </fieldset>
</div>
»それを自分で試してみてください

あなたのボタンのいずれかをしたい場合は"pre-selected" 、HTMLの使用<input> checked属性を:

<input type="radio" checked>
<input type="checkbox" checked>
»それを自分で試してみてください

また、ポップアップの内部にフォームを配置することができます:

<a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline">Show Popup Form</a>

<div data-role="popup" id="myPopup" class="ui-content">
  <form method="post" action="demoform.asp">
    <div>
      <h3>Login information</h3>
      <label for="usrnm" class="ui-hidden-accessible">Username:</label>
      <input type="text" name="user" id="usrnm" placeholder="Username">
      <label for="pswd" class="ui-hidden-accessible">Password:</label>
      <input type="password" name="passw" id="pswd" placeholder="Password">
    </div>
  </form>
</div>
»それを自分で試してみてください