jQuery Mobile 文本輸入
輸入字段是通過標(biāo)準(zhǔn)的 HTML 元素編寫的，jQuery Mobile 會(huì)為它們?cè)O(shè)置專門針對(duì)移動(dòng)設(shè)備的美觀易用的樣式。您還可以使用新的 HTML5 <input> 類型：
實(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 來規(guī)定簡短的提示，以描述輸入字段的預(yù)期值：
<input placeholder="sometext">
文本框
請(qǐng)使用 <textarea> 來實(shí)現(xiàn)多行文本輸入。
注釋：文本框會(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>
親自試一試
搜索框
輸入類型 type="search" 是 HTML5 中的新類型，用于定義供輸入搜索詞的文本字段：
實(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)用戶只選擇有限數(shù)量選項(xiàng)中的一個(gè)時(shí)，會(huì)用到單選按鈕。
如需創(chuàng)建一套單選按鈕，請(qǐng)?zhí)砑?type="radio" 的 input 元素以及相應(yīng)的 label。在 <fieldset> 元素中包裝單選按鈕。您也可以增加一個(gè) <legend> 元素來定義 <fieldset> 的標(biāo)題。
提示：請(qǐng)用 data-role="controlgroup" 屬性來組合這些按鈕：
實(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)用戶選擇有限數(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">
親自試一試
您也可以使用域容器來包裝 <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>
親自試一試