iT邦幫忙

DAY 13
4

HTML5試試看系列 第 13

[HTML5試試看-13] 新的表單元素

HTML5規格,在表單的部份增加了五個標籤,包含datalist, keygen, output, progress及meter。另外,input標籤也新增了許多可以使用的type屬性,包含search, tel, url, email, datetime, date, month, week, time, datetime-local, number, range及color。今天先簡單地介紹這些標籤及input type。
測試了一下幾個新標籤跟input type,發現目前其實只有Opera比較完整支援,其他瀏覽器還差一大截。以下的表單元件,大都只能在Opera底下正常運作。以下列出

datalist
datalist的結構跟select有點像,可以內含option標籤作為選項。不過datalist本身是不可視的元件,他只是提供一個選項清單給input標籤使用。

keygen
keygen顧名思義,就是一個keypair產生器,他的作用是在submit時,產生一組公鑰/私鑰對,把私鑰存放在本地的keystore,把公鑰傳給伺服器。他只支援RSA演算法。

output
output可以當作input型態是number或range時,運算結果的顯示元件。

progress
progress,顧名思義就是可以顯示進度。progress跟meter目前只有Chrome7支援,Opera沒有支援。

meter
meter的用法跟外觀其實跟progress很像,不過為了跟顯示進度的用途在語意上做區分所以分成兩個標籤。通常meter可以用來顯示一些統計的比例,例如磁碟使用率等。

input type: search
search類型跟text類型幾乎是完全一樣的,都只能輸入單行文字,只在外觀上有差別。在一些平台上可能會有專門用來做搜尋的視窗元件,這樣search可以用這樣的元件來在視覺上呈現。

input type: tel
除了限制只能單行,HTML5其實沒有規定tel(也就是telephone,電話)的值應該要符合怎樣的format。需要的話可以透過pattern屬性來指定pattern做驗證。

input type: url
除了限制只能單行,url類型的input輸入的資料必須是合法的絕對網址URL。

input type: email
除了限制只能單行,email類型的input輸入的資料必須是合法的email。

input type: number
number類型的input,限制輸入的資料必須在經過規定的剖析邏輯處理後,必須是數字。

input type: range
指定min與max的數值後,range會顯示一個可以拖拉的元件來選擇數值。

input type: color
目前看起來只有Chrome及Safari有正確地支援。color類型的input,應該只能輸入簡單的顏色名稱或"#FFFFFF"格式的顏色數值。不過看起來只有Chrome及Safari支援oninvalid事件與checkValidity協作。

input type: datetime
datetime限制使用者輸入的是一個合法的UTC格式的日期與時間。格式為日期與時間的組合,請參見date與time的格式說明。日期與時間之間以一個"T"字母隔開,結尾有一個"Z"字母。

input type: time
讓使用者輸入時間,合法的時間格式為0~23兩位數的小時數字,0~59的兩位數的分鐘數字,0~59的兩位數的秒數字,以":"分隔。例如:00:22:37。

input type: date
輸入的必須是合法的日期格式資料。由四位數的年,兩位數的月與兩位數的日組成,以"-"分隔。例如:2010-09-28。

input type: month
只能輸入合法的月份資料。合法的格式是四位數的年加上兩位數的月份,以"-"分隔。例如:2010-09。

input type: week
限制只能輸入週的資訊,合法的格式是四位數的年加上以"W"開頭的字母加上週數,以"-"做分隔。例如2010-W40(這是2010-10-10的週數)

input type: datetime-local
與datetime不同,這裡輸入的日期時間可以使用local的時區的時間,不需要用UTC,代表的字串,結尾沒有"Z"字母。

明天繼續來介紹Validation API。

參賽文章


上一篇
[HTML5試試看-12] 互動元素
下一篇
[HTML5試試看-14] 表單驗證
系列文
HTML5試試看30

尚未有邦友留言

立即登入留言