雷林鵬分享：jQuery Mobile 表單輸入元素

　　jQuery Mobile 表單輸入元素

　　jQuery Mobile 文本輸入框

　　輸入字段是經過標準的 HTML 元素編碼的，jQuery Mobile 將爲它們添加樣式使其看起來更具吸引力，在移動設備上更易使用。您也能使用新的 HTML5 的 類型：

　　實例

　　

 

　　

 

　　全名:

　　

　　生日:

　　

　　E-mail:

　　

　　

 

　　

 

　　嘗試一下 »

　　提示：請使用 placeholder 來指定一個簡短的描述，用來描述輸入字段的指望值：

　　

　　文本域

　　對於多行文本輸入可以使用 。</p> <p>　　注意：當您鍵入一些文本時，文本域會自動調整大小以適應新增長的行。</p> <p>　　實例</p> <p>　　<form method="post" action="demo_form.php"></p> <p>　　<div data-role="fieldcontain"></p> <p>　　<label for="info">附加信息:</label></p> <p>　　<textarea name="addinfo" id="info">

　　

 

 

　　

　　嘗試一下 »

　　搜索輸入框

　　type="search" 類型的輸入框是在 HTML5 中新增的，它是爲輸入搜索定義文本字段：

　　實例

　　

 

　　

 

　　搜索:

　　

　　

 

　　

 

　　嘗試一下 »

　　單選按鈕

　　當用戶在有限數量的選擇中僅選取一個選項時，使用單選按鈕。

　　爲了建立一系列單選按鈕，請添加帶有 type="radio" 的 input 以及相應的 label。把單選按鈕包圍在

元素內。您也能夠添加一個

元素來定義

的標題。

 

　　提示：請使用 data-role="controlgroup" 來把按鈕組合在一塊兒：

　　實例

　　

 

　　

 

　　

Choose your gender:

　　Male

　　

　　Female

　　

　　

 

　　

 

　　嘗試一下 »

　　複選框

　　當用戶在有限數量的選擇中選取一個或多個選項時，使用複選框：

　　實例

　　

 

　　

 

　　

Choose as many favorite colors as you'd like:

　　Red

　　

　　Green

　　

　　Blue

　　

　　

 

　　

 

　　嘗試一下 »

　　更多實例

　　如需水平組合單選按鈕或複選框，請使用 data-type="horizontal"：

　　實例

　　

 

　　嘗試一下 »

　　您也能夠用一個 field 容器包圍

：

 

　　實例

　　

 

　　

 

　　

請選擇您的性別:

　　

 

　　

 

　　嘗試一下 »

　　若是您想要您的按鈕中的一個預先選中，請使用 HTML 中 的 checked 屬性：

　　實例

　　

　　

　　嘗試一下 »

　　本文轉載自：w3cschool(編輯：雷林鵬 來源：網絡 侵刪)