jQuery Mobileフォーム入力要素

jQuery Mobileテキスト入力

入力フィールドは標準のHTML要素で書かれており、jQuery Mobileはそれらにモバイルデバイス向けの美観と使いやすさを提供する特別なスタイルを設定します。新しいHTML5<input>タイプも使用できます：

例

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <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">メール：</label>
    <input type="email" name="email" id="email" placeholder="あなたのメールアドレス..">
  </div>
</form>

自分で試してみる

ヒント：プレースホルダーを使用して、入力フィールドの期待される値を説明する短いヒントを設定してください：

<input placeholder="sometext">

テキストボックス

複数行のテキスト入力を実現するには<textArea>を使用してください。

注：テキストボックスは自動的に拡大して、入力するテキスト行に合わせます。

例

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="info">追加情報：</label>
    <textarea name="addinfo" id="info"></textarea>
  </div>
</form>

自分で試してみる

検索ボックス

入力タイプtype="search"はHTML5の新しいタイプで、検索用語を入力するテキストフィールドを定義するために使用されます：

例

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="search">Search:</label>
    <input type="search" name="search" id="search">
  </div>
</form>

自分で試してみる

単選ボタン

ユーザーが限られた数のオプションの中から一つを選択する場合に使用されます。

一式単選ボタンを作成するには、type="radio"のinput要素および対応するlabelを追加してください。<fieldset>要素内に単選ボタンを包み込んでください。また、<legend>要素を追加して<fieldSet>のタイトルを定義することもできます。

ヒント：これらのボタンを組み合わせるためにdata-role="controlgroup"属性を使用してください：

例

<form method="post" action="demoform.asp">
  <fieldset data-role="controlgroup">
    <legend>性別を選んでください:</legend>
      <label for="male">男性</label>
      <input type="radio" name="gender" id="male" value="male">
      <label for="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>好きな色をいくつでも選んでください:</legend>
      <label for="red">赤</label>
      <input type="checkbox" name="favcolor" id="red" value="red">
      <label for="green">緑</label>
      <input type="checkbox" name="favcolor" id="green" value="green">
      <label for="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 data-role="fieldcontain">
  <fieldset data-role="controlgroup">
    <legend>性別を選んでください:</legend>
  </fieldset>
</div>

自分で試してみる

どのボタンを「事前に選択」したい場合は、HTML <input> タグの checked 属性を使用してください：

例

<input type="radio"> checked>
<input type="checkbox"> checked>

自分で試してみる