jQuery Mobile 文本輸入

輸入字段是通過標準的 HTML 元素編寫的，jQuery Mobile 會為它們設(shè)置專門針對移動設(shè)備的美觀易用的樣式。您還可以使用新的 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>

親自試一試

提示：請使用 placeholder 來規(guī)定簡短的提示，以描述輸入字段的預(yù)期值：

<input placeholder="sometext">

文本框

請使用 <textarea> 來實現(xiàn)多行文本輸入。

注釋：文本框會自動擴大，以適應(yīng)您輸入的文本行。

實例

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="info">Additional Information:</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>

親自試一試

單選按鈕

當用戶只選擇有限數(shù)量選項中的一個時，會用到單選按鈕。

如需創(chuàng)建一套單選按鈕，請?zhí)砑?type="radio" 的 input 元素以及相應(yīng)的 label。在 <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>

親自試一試

復(fù)選框

當用戶選擇有限數(shù)量選項中的一個或多個選項時，會用到復(fù)選框：

實例

<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>

親自試一試

更多實例

如需對單選框或復(fù)選框進行水平分組，請使用 data-type="horizontal" 屬性：

實例

<fieldset data-role="controlgroup" data-type="horizontal">

親自試一試

您也可以使用域容器來包裝 <fieldset>：

實例

<div data-role="fieldcontain">
  <fieldset data-role="controlgroup">
    <legend>Choose your gender:</legend>
  </fieldset>
</div>

親自試一試

如果您希望“預(yù)選”其中一個按鈕，請使用 HTML <input> 標簽的 checked 屬性：

實例

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

親自試一試