最新的Web開發教程
 

jQuery Mobile表單輸入元素


jQuery Mobile的文本輸入框

輸入字段編碼標準的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>
試一試»

複選框

複選框被使用時,一個用戶可以選擇的選擇有限數量的一個或多個選項:

<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>檢查屬性:

<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>
試一試»