html5中form的新特性

學習 dive into html5 的 [url= form of madness[/url] 一章的筆記。

html5中form的新特性可分新型別和新屬性兩部分。

* 新型別

html5中，有了更多更語義的type。現在就可以用它們，瀏覽器如果不支援這些type，會以type="text"顯示，而不必擔心出現亂七八糟的東西。

1.email

桌面瀏覽器上看不出它與text有什麼區別，但在一些沒有實體鍵盤的移動裝置（如iphone）上，鍵入email時會出現針對email（@.）優化過的鍵盤。可以放心的在需要輸入email的地方用type="email"，最壞不過仍是文字框。

2.url

同上。3.搜尋框

以下幾種目前支援都不好（或是還沒支援），需要一定fallback策略。

4.數字

所有屬性都是可選的。

fallback：

4.時間與日期

type="date"，type="month"，type="week"，type="time"，type="datetime"，type="datetime-local"。

fallback：

5.取色器

* 新屬性

1. placeholder

佔位文字，如firefox右上角搜尋框沒焦點時顯示的文字。只支援純文字。

2.autofocus

使指定input在網頁載入後（其實不應是載入後，而應是盡快）自動獲得焦點。

目前支援不好，需要fallback。不應在使用者在瀏覽乙個慢網頁或在這個慢網頁寫帖子寫了兩分鐘時焦點突然跳走，所以要檢查的js緊跟著此input。

但如果編碼規範或是別的什麼不容許在html裡加js，要記住絕不應該把判斷放在window.onload中。

3.novalidate

新版本的瀏覽器會在提交時對email、number等語義input作驗證，有的會顯示驗證失敗資訊（ff，opera），有的則不提示失敗資訊只是不提交（chrome，safari），若不想用html5的驗證，可在form標籤加novalidate。

4.required

必填項。