分享應用程式  接收最新消息: 加入 Facebook 專頁 訂閱 RSS 新聞
iOS 5 支援更多樣化的網頁表單
2011-10-26 00:11 阿傑
點閱:7931

在 iPhone 或 iPad 上,網頁表單的填寫常常是件麻煩事,還好 iOS 5 不只改進了網頁程式的效能,也支援了新的 HTML5 表單欄位格式,並提供方便直覺的介面來輸入資料,不論是網頁設計師或是一般使用者,都能從中獲益。以下就為大家介紹 iOS 5 新支援的欄位型式,如果你在 iOS 5 瀏覽本文,可以試著操作下面的範例。

1. 範圍

<input type="range" min="1" max="10" />

如以上 HTML 程式碼所示,網頁製作者可在 HTML 的 input 標籤中加入 type="range" 屬性,這樣就能在 iOS 5 的 Safari 中呈現可拉動的橫槓,讓使用者選擇某個範圍內的數字。

範例:

 

2. 日期 (date)

<input type="date" value="2012-12-21" />

以上 HTML 可在網頁上呈現日期欄位,並將預設值設定成 2012 年 12 月 21 日。使用者按下它,iOS 5 會跳出一個日期專用的轉輪,讓使用者用撥動的方式選擇年、月、日,今天的日期會以藍色字標出。每當轉輪出現時,它還有個動畫效果:它會刻意從別的日期自動轉動到目前選擇的日期,

範例:

 

 

3. 時間 (time)

<input type="time" value="19:10" />

以上 HTML 碼可呈現時間欄位,並將預設值設在下午 7 點 10 分。和日期一樣,iOS 5 會提供時間轉輪,讓使用者輕鬆選擇時間。

範例:

 

 

4. 月份 (month)

<input type="month" value="2011-10" />

以上 HTML 可呈現時間欄位,預設值在 value 屬性中指定為 2011 年 10 月。和以上欄位類似,iOS 5 會提供年份和月份的選擇介面。

範例:

 

 

5. 日期與時間 (datetime)

<input type="datetime" value="2012-12-21T21:01:32Z" />

以上 HTML 可在網頁上讓使用者同時輸入日期和時間,iOS 5 提供的介面相當方便,可以看到星期和上下午等資訊,但是看不到年份,使用者只能從欄位本身的數字變化得知年份。程式從這個欄位獲得的數值是世界標準時間,若要取得本地時間,type 屬性要改成 datetime-local。

範例:

 

 

6. 搜尋

<input type="search" placeholder="搜尋" />

在 iOS 5 中,搜尋欄位變成圓角的形狀,以便和一般文字欄位保持區別。網頁設計師可加入 placeholder 屬性,用一段提示文字讓使用者知道欄位的作用。

範例:

 

對於 iOS 來說,以上的欄位除了搜尋之外,都只有 iOS 5 的 Safari 能支援,它們在舊版的 iOS 中會變成一般的文字欄位,網頁製作者可以先偵測使用者的 iOS 版本(可參考這裡),來決定是否顯示新欄位。這些新欄位可以讓網頁表單的輸入和處理更加方便,如果製作人員能多加適當運用,將能提升網站的使用經驗。

瀏覽所有文章 >

歡迎您發表意見,您可使用 Facebook 身分,或先在本站登入註冊。