jQuery Mobile 文本輸入

輸入字段是通過(guò)標(biāo)準(zhǔn)的 HTML 元素編寫(xiě)的，jQuery Mobile 會(huì)為它們?cè)O(shè)置專(zhuān)門(mén)針對(duì)移動(dòng)設(shè)備的美觀易用的樣式。您還可以使用新的 HTML5 <input> 類(lèi)型：

實(shí)例

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

親自試一試

提示：請(qǐng)使用 placeholder 來(lái)規(guī)定簡(jiǎn)短的提示，以描述輸入字段的預(yù)期值：

<input placeholder="sometext">

文本框

請(qǐng)使用 <textarea> 來(lái)實(shí)現(xiàn)多行文本輸入。

注釋?zhuān)?/span>文本框會(huì)自動(dòng)擴(kuò)大，以適應(yīng)您輸入的文本行。

實(shí)例

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="info">Additional Information:</label>
    <textarea name="addinfo" id="info"></textarea>
  </div>
</form>

親自試一試

搜索框

輸入類(lèi)型 type="search" 是 HTML5 中的新類(lèi)型，用于定義供輸入搜索詞的文本字段：

實(shí)例

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

親自試一試

單選按鈕

當(dāng)用戶(hù)只選擇有限數(shù)量選項(xiàng)中的一個(gè)時(shí)，會(huì)用到單選按鈕。

如需創(chuàng)建一套單選按鈕，請(qǐng)?zhí)砑?type="radio" 的 input 元素以及相應(yīng)的 label。在 <fieldset> 元素中包裝單選按鈕。您也可以增加一個(gè) <legend> 元素來(lái)定義 <fieldset> 的標(biāo)題。

提示：請(qǐng)用 data-role="controlgroup" 屬性來(lái)組合這些按鈕：

實(shí)例

<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ù)選框

當(dāng)用戶(hù)選擇有限數(shù)量選項(xiàng)中的一個(gè)或多個(gè)選項(xiàng)時(shí)，會(huì)用到復(fù)選框：

實(shí)例

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

親自試一試

更多實(shí)例

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

實(shí)例

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

親自試一試

您也可以使用域容器來(lái)包裝 <fieldset>：

實(shí)例

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

親自試一試

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

實(shí)例

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

親自試一試