【範例7-3 文本編輯框製作簡單的調查問卷】
01 <!DOCTYPEhtml>
02 <html>
03 <head>
04 <metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />
05 <title>調查問卷</title>
06 <metaname="viewport" content="width=device-width,initial-scale=1">
07 <linkrel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css"/>
08 <scriptsrc="http://code.jquery.com/jquery-1.7.1.min.js"></script>
09 <scriptsrc="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
10 </head>
11 <body>
12 <div data-role="page">
13 <divdata-role="header">
14 <h1>調查問卷</h1> <!—先加上一個頭部欄和標題—>
15 </div>
16 <divdata-role="content">
17 <formaction="#" method="post">
18 <!--placeholder屬性的內容會在編輯框內以灰色顯示-->
19 <inputtype="text" name="xingming" id="xingming"placeholder="請輸入你的姓名："/>
20 <!--當data-clear-btn的值爲true時，當該編輯框被選中-->
21 <!--可以單擊右側的按鈕將其中的內容清空-->
22 <inputtype="tel" name="dianhua" id="dianhua"data-clear-btn="true" placeholder="請輸入你的電話號碼：">
23 <labelfor="adjust">請問您對本書有何看法？</label>
24 <!—這裏用到了textarea而不是input-->
25 <textareaname="adjust" id="adjust"></textarea>
26 <!—通過for屬性與textarea進行綁定-->
27 <labelfor="where">請問您是在哪裏得到這本書的？</label>
28 <!--使用label時要使用for屬性指向其對應控件的id-->
29 <textareaname="where" id="where"></textarea>
30 <ahref="#" data-role="button">提交</a>
31 </form>
32 </div>
33 </div>
34 </body>
35 </html>
運行結果如圖7-4所示。
當在編輯框中輸入內容時，頁面會發生一定的變化，如頁面上方輸入姓名和電話的兩個編輯框中的文字會自動消失，要求填寫電話信息的編輯框右側會出現一個“刪除”的圖標，單擊該圖標，編輯框中的內容會被自動刪除。另外，頁面下方兩個編輯框的內容會隨着其中內容的行數而自動增加高度。
在問卷中填入數據後的頁面如圖7-5所示。之所以會帶來這些變化是由於，jQuery Mobile爲文本編輯框設置了一些屬性，如placeholder屬性中的內容即是當編輯框未被使用時在其中顯示的內容。而當用戶在編輯框中輸入數據之後，placeholder所標註的內容會自動消失。
圖7-4 簡單的手機調查問卷 圖7-5 在問卷中填入內容
在本範例中新用到的控件textarea，可以認爲是一種定義了多行文本的文本編輯控件，它可以根據其中的內容自動調整自身的高度，同時也可以通過拖拽的方式對其大小進行調整。
另外有讀者也許會注意到在輸入電話的編輯框中，筆者將空間的type屬性設置爲了tel，這樣就會在用戶輸入其中內容時，自動將輸入法切換到數字鍵盤，方便用戶使用。
另外，jQueryMobile還提供了一些其他屬性，表7-1將它們一一列舉出來，供讀者參考。