這篇文章給大家介紹HTML 5中怎么使用 Input 類(lèi)型，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

創(chuàng)新互聯(lián)專(zhuān)注于鑲黃企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站設(shè)計(jì),商城系統(tǒng)網(wǎng)站開(kāi)發(fā)。鑲黃網(wǎng)站建設(shè)公司,為鑲黃等地區(qū)提供建站服務(wù)。全流程按需定制，專(zhuān)業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)專(zhuān)業(yè)和態(tài)度為您提供的服務(wù)

EMAIL

<input type="email" />

在提交表單時(shí)會(huì)自動(dòng)驗(yàn)證email的格式

效果：

URL

<input type="url" />

在提交表單時(shí)會(huì)自動(dòng)驗(yàn)證url的格式

效果：

NUMBER

<input type="number" max="9" min="0" step="2"/>

可以限制輸入的數(shù)字，step為上一個(gè)數(shù)字與下一個(gè)數(shù)字的間隔

效果：

RANGE

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

滑動(dòng)條，能過(guò)選擇性的對(duì)限制范圍內(nèi)的數(shù)值進(jìn)行設(shè)置

效果：

Date Pickers(數(shù)據(jù)檢出器)

HTML5 擁有多個(gè)可供選取日期和時(shí)間的新輸入類(lèi)型：

• date - 選取日、月、年

• month - 選取月、年

• week - 選取周和年

• time - 選取時(shí)間(小時(shí)和分鐘)

• datetime - 選取時(shí)間、日、月、年(UTC 時(shí)間)

• datetime-local - 選取時(shí)間、日、月、年(本地時(shí)間)

This is how Opera renders <input type="date">:

If you need a time to go with that date, Opera also supports <input type="datetime">:

If you only need a month + year (perhaps a credit card expiration date), Opera can render a <input type="month">:

Less common, but also available, is the ability to pick a specific week of a year with <input type="week">:

Last but not least, you can pick a time with <input type="time">:

地址：http://diveintohtml5.org/forms.html

以上都是從關(guān)于時(shí)間的都是網(wǎng)上找到，自己做的是這樣的

其中圖片中顯示的UTC為世界統(tǒng)一時(shí)間

SEARCH

<input id="search" type="url" list="searchlist" required /> <datalist id="searchlist">                 <option value="http://www.google.com" label="Google" />                 <option value="http://www.yahoo.com" label="Yahoo" />                 <option value="http://www.bing.com" label="Bing" /> </datalist>

這里的datalist相當(dāng)于下拉列表，可以進(jìn)行選擇

TELEPHONE

<input type="telephone" />

可輸入一個(gè)電話號(hào)碼

效果：

COLOR

<input type="color"/>

可以獲取顏色

效果：

以上個(gè)人圖片效果顯示均來(lái)自opera瀏覽器

下面圖片時(shí)各主流瀏覽器對(duì)input的支持情況：

input標(biāo)簽表單類(lèi)型的顯示情況：

關(guān)于HTML 5中怎么使用 Input 類(lèi)型就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

新聞標(biāo)題：HTML5中怎么使用Input類(lèi)型
網(wǎng)站網(wǎng)址：http://jinyejixie.com/article44/ggepee.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供云服務(wù)器、用戶(hù)體驗(yàn)、網(wǎng)站建設(shè)、全網(wǎng)營(yíng)銷(xiāo)推廣、品牌網(wǎng)站設(shè)計(jì)、服務(wù)器托管

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)