# 表單元素 Form elements 所有的表單元素都是由標準的html元素控制的，然后又得到增強，使他們更吸引人并且容易使用。在不支持Jquery Mobile的瀏覽器下仍然是可用的，因為它們都是基于原生的html元素. ## 表單基礎 Form basics Jquery Mobile提供了一套完整的，適合觸摸操作的表單元素，他們都是基于原生的html元素 ## 表單結構 Form structure 所有的表單都應該被包裹在一個form標簽內，這個標簽應該指定好action和method 屬性用來控制與服務器傳送數據的方法 **html代碼** ``` <form action="form.php" method="post"> ... </form> ``` ## 標記的規約 Markup Conventions 在Jquery Mobile中組織表單時，大多數創建普通的 HTTP post ，get方式的表單是需要遵守的規約依然是適用的? 但是有一點要注意，form的id屬性不僅需要在該頁面內唯一? 也需要在整個網站的所有頁面中是唯一的 這是因為Jquery Mobile的單頁面內導航的機制使得多個不同"page"可以同時在DOM中出現，所以你必須給表單使用不同的id屬性，以保證在每個DOM中的表單的ID都是不同的。（當然，請務必給內部的label元素合適的使用for屬性） ## 表單元素的自動初始化 Auto-initialization of form elements 默認情況下，Jquery Mobile會自動把原生的表單元素增強為適合觸摸操作的組件。這是它通過標簽名尋找表單元素，然后對他們執行Jquery Mobile插件的方法內部實現的，所以比如說，select元素被找到后，Jquery Mobile通過用selectmenu插件進行初始化，而一個屬性為type="checkbox"的input元素會被checkboxradio插件來增強。初始化完畢后，你可以用他們的Jquery UI的組件的方法通過程序進一步使用或設定他們的增強功能。（查看 查找可用的方法） ## 防止表單元素被自動初始化 Preventing auto-initialization of form elements 如果你需要某表單元素不被Jquery Mobile 處理，只需要給這個元素增加 data-role="none" 屬性 **html代碼** ``` <label for="foo"> 　<select name="foo" id="foo" data-role="none"> 　 <option value="a" >A</option> 　 <option value="b" >B</option> 　 <option value="c" >C</option> </select> ``` 或者，如果你不想增加上述的屬性，可以設置頁面插件?keepNative選項（默認情況下為[data-role="none"]），來自定義用來防止初始化的選擇器。請務必在mobileinit事件的處理程序中設置這個選項，能讓第一個頁面以及隨后被加載的頁面應用此設置 **html代碼** ``` $(document).bind('mobileinit',function(){ $.mobile.page.prototype.options.keepNative = "select, input.foo, textarea.bar"; }); ``` select元素情況比較特殊。如果select元素在表單當中，上例會阻止針對頁面中select 元素的所有的增強行為。如果你想保持菜單本身的外觀與表現，行為，同時又想通過Jquery Mobile增強select的按鈕的視覺外觀，你可以在mobileinit的回調函數中.mobile.nativeSelectMenu設為true作為全局設置或者在每個元素上逐個使用data-native="true"進行設置 ## 動態的表單布局 Dynamic form layout 在Jquery Mobile中，所有的表單元素都被設計成彈性寬度以適應不同移動設備的屏幕寬度。在Jquery Mobile中內建的一個優化就是根據屏幕寬度的不同,label和表單元素的寬度是不同的 如果屏幕寬度相對窄（小于480px),label元素會被樣式化為塊級元素，使他們能夠置于表單元素上方，節省水平空間 在比較寬的屏幕上，label和表單元素會被樣式化為兩列的網格布局的一行中，充分利用頁面的空間 ## 表單內區域容器　Field containers 我們建議把表單內的每一個label/表單元素對用div或fieldset容器包裹，然后增加data-role="fieldcontain"屬?，以改善標簽和表單元素在寬屏設備中的樣式。Jquery Mobile會自動在容器底部添加一條細邊框作為分隔線，使得label/表單元素對在快速掃視時看起來對齊 **html代碼** ``` <div data-role="fieldcontain"> ...label/input code goes here... </div> ``` ## 刷新表單元素 Refreshing form elements 每一個表單組件都有刷新方法。以下是實例 **html代碼** ``` 復選按鈕 $("input[type='checkbox']").attr("checked",true).checkboxradio("refresh"); ``` 單選按鈕組: ``` $("input[type='radio']").attr("checked",true).checkboxradio("refresh"); ``` 選擇列表:: ``` var myselect = $("select#foo"); myselect[0].selectedIndex = 3; myselect.selectmenu("refresh"); ``` 滑動條 ``` $("input[type=range]").val(60).slider("refresh"); ``` 開關 (they use slider): ``` var myswitch = $("select#bar"); myswitch[0].selectedIndex = 1; myswitch .slider("refresh"); ```