1.新增表單特點

表單是HTML中非常重要的一部分，是連線前端與後臺的橋樑，它擔負大量的使用者和網頁後臺資料更新互動的任務。

因此在HTML5中表單也發生了一些變化，它在保持簡便易用的特性的同時，增加了許多內建的控制元件或者控制元件屬性來滿足使用者的需求，並且同時減少了開發人員的程式設計。

2.新增表單控制元件

（1）email輸入型別

<input type="email" name="youxiang"/>

此型別要求輸入格式正確的email地址，否則瀏覽器是不允許提交的，並會有一個錯誤資訊提示。此型別在Opera中必須指定name值，否則無效果。

（2）url輸入型別

<input type="url" name="dizhi" />

上面程式碼展示的文字域要求輸入格式正確的URL地址，開始處需要新增http://。

（3）日期時間相關輸入型別

<input type="date">      <!--格式：  年/月/日 --> 
<input type="time">      <!--格式：  時/分 --> 
<input type="month">     <!--格式：  年/月 -->  
<input type="week">      <!--格式：  年/周 -->
 
 

這一系列是很酷的一個型別，完全解決了煩瑣的JS日曆控制元件問題。但目前各種瀏覽器相容性不是很好，且展示效果也不一樣。

（4）number輸入型別

<input type="number"/>

輸入框中只能用來輸入數字，不支援其他字元，在輸入框上有可以點選的上下按鈕。但瀏覽器支援情況不是很好，IE和Firefox不支援。

（5）search輸入型別

<input type="search" results=s />

此型別表示輸入的將是一個搜尋關鍵字，通過results=s可顯示一個搜尋小圖示。

（6）tel輸入型別

<input type="tel" />
 

此型別要求輸入一個電話號碼，但實際上它並沒有特殊的驗證，與text型別沒什麼區別。

（7）color輸入型別

<input type="color" />    

此型別可以讓使用者通過顏色選擇器選擇一個顏色值，並反饋到value中。

（8）range滑塊

<input type="range" max="100" min="0" step="20" value="10">

具有返回數值結果的滑塊控制元件，可以調節滑塊的最大值、最小值以及漸程序度。

3.新增表單屬性

（1）placeholder屬性

<input type="text" placeholder="文字框提示文字，點選將會清除">

這是一個很實用的屬性，免去了用JS實現點選清除表單初始值，標準瀏覽器都能很好的支援。

（2）required/pattern屬性

<input type="text" required pattern="^[1-9]\d{5,12}$">

• 表單驗證屬性，require型別若輸入值為空，則拒絕提交
• pattern型別為正則驗證，可以完成各種複雜的驗證
• 這兩種型別在Opera中必須指定name值，否則無效果

（3）autofocus屬性

<input type="text" autofocus="true">

預設聚焦屬性，可在頁面載入時聚焦到一個表單控制元件，類似於JS的focus()。

（4）list屬性

<input type="text" list="ilist">
<datalist id="ilist">
  <option value="值1"></option>
  <option value="值2"></option>
  <option value="值3"></option>
</datalist>

該屬性需要與datalist屬性共用，datalist是對選擇框的記憶，而list屬性可以為選擇框自定義記憶的內容。

（5）max/min/step屬性

<input type="range" max="100" min="0" step="20" value="10">

• max定義最大值
• min定義最小值
• step定義漸程序度

（6）autocomplete屬性

<input type="text" autocomplete="on">

autocomplete屬性規定表單是否應該啟用自動完成功能。預設值是"on"，為自動補全，如果為"off"則是關閉自動補全功能。