HTML5之HTML元素擴充(下)—增強的Form表單元素值得關注_html5教學技巧

在HTML5增強的元素中，最值得關注的就是表單元素。在HTML5中，表單已經做了重大的修整，一些以前需要透過JavaScript編碼實現的功能現在無需編碼就可輕鬆實現。在開始討論之前，需要注意一點：

在HTML5中，表單控制項是可以處於其所屬的一個或多個表單的外部的。所以，表單控制項像fieldset，label，input這些都加入了form屬性，用來識別表單控制項所屬的表單。

在HTML5中：

1. form元素本身增加了兩個新的屬性：autocomplete和novalidate。 autocomplete屬性用於啟用「下拉建議清單」功能，novalidate屬性用於關閉表單驗證功能，這在測試時會很有用。

2. fieldset元素增加了三個新屬性：disable、name和form。 disable屬性用來停用fieldset，name屬性用來設定fieldset的名稱，form屬性的值是fieldset所屬的一個或多個表單的ID，這個前面也說了，當fieldset被置於表單的外部時，你必須設定該fieldset標籤的form屬性，這樣fieldset就可以正確地與一個或多個表單關聯。

3. label元素除for屬性外，只增加了form屬性。這裡值得一提的是for屬性，我以前還真沒注意過。 for屬性用於指定label附屬的表單控件，這樣點擊這個label時會讓附屬的表單控件獲得焦點，例如：

複製程式碼

程式碼如下:

Click Me

點擊"Click Me"，則後面的輸入框會獲得焦點。

4. input元素引入了一些新的類型與屬性，增強了表單的可用性。這些新的輸入類型，用於對資料進行組織和歸類，非常有用，遺憾的是並沒有哪一個瀏覽器能很好的支援所有的這些類型。
除了原來button,text,submit,checkbox,radio,select,password的類型，HTML5加入了下列新的input類型：

顏色：color
各種日期：date, datetime, datetime-local, month, week, time
電子郵件：email
數字：number
範圍：range
搜尋：search
數字：number
範圍：range

搜尋：search
電話：tel
URL類型：url

可以運行下面的範例來查看不同瀏覽器的支援情況：

複製程式碼

程式碼如下:

Select your favorite color:
Birthday:
Birthday (date and time):
Birthday (date and time):
Birthday (month and year):
Select a time:
Select a week:
Quantity (between 1 and 5):
Quantity(between 1 and 10):
Search Google :
Telephone:
Add your homepage:
E-mail:

form>
以下這些是新增加的input屬性：
autocomplete：自動顯示先前輸入過的信息，取值"on"或"off"。適用於text, search, url, tel, email, password, datepickers, range, and color類型。

autofocus：頁面載入完成後自動取得到焦點。
form：指定input所屬的form，可以是多個。
formaction：指定form提交後處理這個input的頁面(URL)或檔案。　　
formenctype：指定form提交後資料如何編碼。
formmethod：指定傳送form資料的HTTP方法，會覆寫對應form的HTTP方法。
formnovalidate：提交前不檢查資料的有效性。
formtarget：指定在那個地方顯示form提交後response的內容。
height, width：輸入框長和寬，只適用於image型。　
max，min：輸入值的最大值和最小值。適用於有意義的number,range, 日期類型。　　
multiple：是否允許輸入多個值，適用於email和file類型。
pattern：指定驗證輸入值的正規表示式，適用於text,search,url,tel,email,password。
placeholder：輸入前的提示訊息，適用於text,search,url,tel,email,password。
required：是否為必填項，如果不填必填項，則表單不能提交，適用於text, search, url, tel, email, password, date pickers, number, checkbox, radio, 和file類型。
step：輸入自動成長時的步長值，適用於number, range, date, datetime, datetime-local, month, time和week型別。
list：輸入項目的候選列表，需要和datalist元素搭配使用，list屬性可用在這些類型上：text、search、url、tel、email、date、number、range和color，目測在FireFox上有效。看一個小例子：

複製程式碼

程式碼如下:

程式碼如下:

Favorites

下面的例子嘗試使用了各個屬性，可以運行在不同的瀏覽器下查看實際效果：

複製程式碼

程式碼如下:

電子郵件：
圖片:
輸入1980-01-01 之前的日期：
輸入2000-01-01 之後的日期：
數量（1 到5 之間）：
選擇影像：
國家/地區代碼：
姓名：
使用者名稱：
數字：

姓名：

姓氏：

建議：雖然不是所有的瀏覽器都支持所有的類型，但還是鼓勵大家使用這些新類型，因為即使瀏覽器不支持，只是會變得簡單的文字輸入框旁邊。

實用參考：
W3C 的教學：http://www.w3schools.com/html5/default.asp
HTML5官方指南：http://dev.w3.org/html5/html-author/
相當不錯的一個指南網站：http://html5doctor.com/
HTML5中文教學：http://www.html5china.com/
一個不錯的前端部落格：http://www.pjhome.net/default.asp?cateID= 1
JS操作表單的相關知識：http://www.cnblogs.com/xugang/archive/2010/08/12/1798005.html