jQuery Mobile(7)-表單建立

行動裝置上的表單原則上和傳統HTML表單語法並無差異,不過 jQuery Mobile 提供了行動裝置的風格,並且讓設計師可以更簡單的排版。本文主要是針對一些小細節做說明。

資料來源:跨裝置網頁設計jQuery Mobile Demos

建立表單

表單的基本HTML語法請參見HTML表單篇HTML5 Input型態。若是表單要傳送到Server端,在表單的頭尾記得加上

。表單的物件允許使用 data-mini=“true” 顯示比較細的格式;以及 data-theme 指定表單的樣式。

在 jQuery Mobile 中,每一組的表單欄位會有一個 label 物件和一個表單物件(例如input、checkbox),並且 label 要加入 for=“表單物件ID” 屬性來指定對應的表單物件。如果在表單欄位的外面加入

,表單會根據螢幕畫面做最適當的配置:寬螢幕的 label 會在 input 的左手邊,窄小的螢幕在 fieldcontain 之間會多一條分隔線。如果想要隱藏標籤,可以在 fieldcontain 加入 class=“ui-hide-label”,或是在 label 加入 class=“ui-hidden-accessible”。基本的範例如下:


表單選項與開關

select 的使用方式和傳統 HTML 一樣,比較需要注意的是 option 不加 value 屬性會錯誤。select 彈出的選單預設為瀏覽器風格,若要使用 jQuery Mobile 的風格,必須加入 data-native-menu=“false” 屬性。select 加入 data-role=“slider” 會使其變成開關的樣子,不過 option 只能有二個,否則會造成錯誤(2-9行)。checkbox 和 radio 因為通常是先有核取方塊,才顯示文字內容,因此 label 會擺在 input 的後面(41-43行)。群組的核取方塊可以使用

將它括起來,此時 legend 物件會作為整個群組的 label (20-53行)。若是核取方塊的內容很簡單,可以加入 data-type=“horizontal” 屬性將它變成横排,可以使畫面更簡潔(39-44行)。程式範例如下:

<legend>群組下拉選單說明</legend>
<legend>核取方塊</legend>
<legend>選取方塊</legend>