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>
親自試一試
復選框
當用戶選擇有限數(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>
親自試一試
更多實例
如需對單選框或復選框進行水平分組，請使用 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>
親自試一試