溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
本篇內(nèi)容介紹了“html5中新的表單輸入類型怎么使用”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！
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
當(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" />
當(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" />
當(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 類型用于應(yīng)該包含一定范圍內(nèi)數(shù)字值的輸入域。range 類型顯示為滑動(dòng)條。您還能夠設(shè)定對(duì)所接受的數(shù)字的限定。
示例
<input type="range" name="user_range" min="1" max="10" />
其用于數(shù)字限定的屬性同number類型前四個(gè)。
用于選取日期和時(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í)間）
用于搜索字段，比如站點(diǎn)搜索或 Google 搜索（搜索字段的表現(xiàn)類似常規(guī)文本字段）。
示例
Search Google:<input type="search" name="googlesearch">
當(dāng)?shù)膖ype屬性設(shè)置為color，會(huì)自動(dòng)檢驗(yàn)輸入內(nèi)容是否為顏色格式。
示例
Select your favorite color:<input type="color" name="favcolor">
當(dāng)?shù)膖ype屬性設(shè)置為tel，會(huì)自動(dòng)檢驗(yàn)輸入內(nèi)容是否為電話號(hào)碼格式。
示例
Telephone:<input type="tel" name="usrtel">
“html5中新的表單輸入類型怎么使用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼
