站長(zhǎng)資訊網(wǎng)
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中擁有多個(gè)新的表單輸入類型。這些新特性提供了更好的輸入控制和驗(yàn)證。
本文將介紹以下幾種新增的表單元素輸入類型：
- url
- number
- range
- Date pickers（date，month，week，time，datetime，datetime-local）
- search
- color
- tel
email類型
當(dāng)?shù)膖ype屬性設(shè)置為email，在提交表單時(shí)，會(huì)自動(dòng)驗(yàn)證email域的值是否符合email的標(biāo)準(zhǔn)格式，再也不用自己用正則表達(dá)式去寫email的格式驗(yàn)證了。
示例
Email：<input type="email" name="useremail" />
url類型
當(dāng)?shù)膖ype屬性設(shè)置為url，在提交表單時(shí)，會(huì)自動(dòng)驗(yàn)證url域的值是否符合url的標(biāo)準(zhǔn)格式。
示例
Linkpage:<input type="url" name="link_url" />
number類型
當(dāng)?shù)膖ype屬性設(shè)置為number時(shí)，會(huì)自動(dòng)檢驗(yàn)輸入內(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ī)定輸入字段的最大字符長(zhǎng)度 |
| pattern | 規(guī)定用于驗(yàn)證輸入字段的模式 |
| readonly | 規(guī)定輸入字段的值無(wú)法修改 |
| required | 規(guī)定輸入字段的值是必須的 |
| size | 規(guī)定輸入字段的可見字符 |
range類型
range 類型用于應(yīng)該包含一定范圍內(nèi)數(shù)字值的輸入域。range 類型顯示為滑動(dòng)條。您還能夠設(shè)定對(duì)所接受的數(shù)字的限定。
示例
<input type="range" name="user_range" min="1" max="10" />
其用于數(shù)字限定的屬性同number類型前四個(gè)。
Date Pickers 日期選擇器類型
用于選取日期和時(shí)間。
示例
Date：<input type="date" name="user_date" />
用于選取日期和時(shí)間的輸入類型：
- date 選取日、月、年
- month 選取月、年
- week 選取周和年
- time 選取時(shí)間（小時(shí)和分鐘）
- datetime 選取時(shí)間、日、月、年（UTC時(shí)間，有時(shí)區(qū)）
- datetime-local 選取時(shí)間、日、月、年（本地時(shí)間）
search類型
用于搜索字段，比如站點(diǎn)搜索或 Google 搜索（搜索字段的表現(xiàn)類似常規(guī)文本字段）。
示例
Search Google:<input type="search" name="googlesearch">
color類型
當(dāng)?shù)膖ype屬性設(shè)置為color，會(huì)自動(dòng)檢驗(yàn)輸入內(nèi)容是否為顏色格式。
示例
Select your favorite color:<input type="color" name="favcolor">
tel類型
當(dāng)?shù)膖ype屬性設(shè)置為tel，會(huì)自動(dòng)檢驗(yàn)輸入內(nèi)容是否為電話號(hào)碼格式。
示例
Telephone:<input type="tel" name="usrtel">
