女人书籍排行榜,古风名字,欢乐颂第二季

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

HTML5新的Input類型

HTML5 擁有多個新的表單輸入類型。這些新特性提供了更好的輸入控制和驗證。

成都創(chuàng)新互聯(lián)長期為1000多家客戶提供的網(wǎng)站建設(shè)服務(wù)，團隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為朔城企業(yè)提供專業(yè)的成都網(wǎng)站建設(shè)、網(wǎng)站制作，朔城網(wǎng)站改版等技術(shù)服務(wù)。擁有十多年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

介紹這些新的輸入類型：

email
url
number
range
Date pickers (date, month, week, time, datetime, datetime-local)
search
color
telephone
color

EMAIL

在提交表單時會自動驗證email的格式

效果：

URL

在提交表單時會自動驗證url的格式

效果：

NUMBER

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

效果：

RANGE

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

效果：

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

HTML5 擁有多個可供選取日期和時間的新輸入類型：

date - 選取日、月、年
month - 選取月、年
week - 選取周和年
time - 選取時間(小時和分鐘)
datetime - 選取時間、日、月、年(UTC 時間)
datetime-local - 選取時間、日、月、年(本地時間)

This is how Opera renders :

If you need a time to go with that date, Opera also supports :

If you only need a month + year (perhaps a credit card expiration date), Opera can render a :

Less common, but also available, is the ability to pick a specific week of a year with :

Last but not least, you can pick a time with :

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

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

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

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

效果：

TELEPHONE

可輸入一個電話號碼

效果：

COLOR

可以獲取顏色

效果：

以上個人圖片效果顯示均來自opera瀏覽器

下面圖片時各主流瀏覽器對input的支持情況：

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

【編輯推薦】

12個精妙有趣的HTML 5應(yīng)用
20個HTML 5和CSS3的免費網(wǎng)站模板與教程
10個國外開發(fā)的HTML 5精彩應(yīng)用
初學(xué)者必知的HTML 5入門級技巧

標(biāo)題名稱：HTML5新的Input類型
文章起源：http://fisionsoft.com.cn/article/dpcshie.html

新聞中心

其他資訊