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。

參賽文章