html5中新的表單輸入類型有：1、email類型；2、url類型；3、number類型；4、range類型；5、日期選擇器類型（date、month、week、time等）；6、search類型；7、color類型；8、tel類型。

本教程操作環境：windows7系統、HTML5版、Dell G3電腦。

HTML表單用于收集不同類型的用戶輸入，在HTML表單中 元素是最重要的表單元素。 元素有很多形態，根據不同的 type 屬性，在原HTML表單中type類型有text、password、radio、submit等等，在新的HTML5中擁有多個新的表單輸入類型。這些新特性提供了更好的輸入控制和驗證。

本文將介紹以下幾種新的輸入類型：

emailurlnumberrangeDate pickers（date，month，week，time，datetime，datetime-local）searchcolortelemail類型

當的type屬性設置為email，在提交表單時，會自動驗證email域的值是否符合email的標準格式，再也不用自己用正則表達式去寫email的格式驗證了。

示例

Email：<input type="email" name="useremail" />url類型

當的type屬性設置為url，在提交表單時，會自動驗證url域的值是否符合url的標準格式。

示例

Linkpage:<input type="url" name="link_url" />number類型

當的type屬性設置為number時，會自動檢驗輸入內容是否為數字類型，您還能夠設定該輸入框數字的限定。

示例

Number：<input type="number" name="user_num" min="1" max="10" />

用于數字限定的屬性：

屬性描述max規定允許的最大值min規定允許的最小值step規定合法的數字間隔（如果 step=“3”，則合法的數是 -3,0,3,6 等）value規定默認值disabled規定輸入字段是禁用的maxlength規定輸入字段的最大字符長度pattern規定用于驗證輸入字段的模式readonly規定輸入字段的值無法修改required規定輸入字段的值是必須的size規定輸入字段的可見字符range類型

range 類型用于應該包含一定范圍內數字值的輸入域。range 類型顯示為滑動條。您還能夠設定對所接受的數字的限定。

示例

<input type="range" name="user_range" min="1" max="10" />

其用于數字限定的屬性同number類型前四個。

Date Pickers 日期選擇器類型

用于選取日期和時間。

示例

Date：<input type="date" name="user_date" />

用于選取日期和時間的輸入類型：

date 選取日、月、年month 選取月、年week 選取周和年time 選取時間（小時和分鐘）datetime 選取時間、日、月、年（UTC時間，有時區）datetime-local 選取時間、日、月、年（本地時間）search類型

用于搜索字段，比如站點搜索或 Google 搜索（搜索字段的表現類似常規文本字段）。

示例

Search Google:<input type="search" name="googlesearch">color類型

當的type屬性設置為color，會自動檢驗輸入內容是否為顏色格式。

示例

Select your favorite color:<input type="color" name="favcolor">tel類型

當的type屬性設置為tel，會自動檢驗輸入內容是否為電話號碼格式。

示例

Telephone:<input type="tel" name="usrtel">

相關推薦：《html視頻教程》

總結

以上是生活随笔為你收集整理的html5中新的表单输入类型是什么的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。