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

本教程操作環(huán)境：windows7系統(tǒng)、HTML5版、Dell G3電腦。

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

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

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

當(dāng)?shù)膖ype屬性設(shè)置為email，在提交表單時，會自動驗證email域的值是否符合email的標(biāo)準(zhǔn)格式，再也不用自己用正則表達(dá)式去寫email的格式驗證了。

示例

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

當(dāng)?shù)膖ype屬性設(shè)置為url，在提交表單時，會自動驗證url域的值是否符合url的標(biāo)準(zhǔn)格式。

示例

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

當(dāng)?shù)膖ype屬性設(shè)置為number時，會自動檢驗輸入內(nèi)容是否為數(shù)字類型，您還能夠設(shè)定該輸入框數(shù)字的限定。

示例

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

用于數(shù)字限定的屬性：

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

range 類型用于應(yīng)該包含一定范圍內(nèi)數(shù)字值的輸入域。range 類型顯示為滑動條。您還能夠設(shè)定對所接受的數(shù)字的限定。

示例

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

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

Date Pickers 日期選擇器類型

用于選取日期和時間。

示例

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

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

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

用于搜索字段，比如站點搜索或 Google 搜索（搜索字段的表現(xiàn)類似常規(guī)文本字段）。

示例

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

當(dāng)?shù)膖ype屬性設(shè)置為color，會自動檢驗輸入內(nèi)容是否為顏色格式。

示例

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

當(dāng)?shù)膖ype屬性設(shè)置為tel，會自動檢驗輸入內(nèi)容是否為電話號碼格式。

示例

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

相關(guān)推薦：《html視頻教程》

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。