国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看

打開(kāi)APP
userphoto
未登錄

開(kāi)通VIP,暢享免費(fèi)電子書(shū)等14項(xiàng)超值服

開(kāi)通VIP
HTML5 新的 Input 類型

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

介紹這些新的輸入類型:

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

EMAIL

<input type="email" name="email" />

在提交表單時(shí)會(huì)自動(dòng)驗(yàn)證email的格式,opera瀏覽器中必須有name屬性,否則不起作用

效果:

 

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í)間的新輸入類型:

  • 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 type IE Firefox Opera Chrome Safari
email No No 9.0 No No
url No No 9.0 No No
number No No 9.0 No No
range No No 9.0 4.0 4.0
Date pickers No No 9.0 No No
search No No No No No
color No No No No No

 

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

 

 參考網(wǎng)站:A Form of Madness

               HTML5

               W3CSchool 中文

               how to intranet

本站僅提供存儲(chǔ)服務(wù),所有內(nèi)容均由用戶發(fā)布,如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請(qǐng)點(diǎn)擊舉報(bào)
打開(kāi)APP,閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
HTML5基礎(chǔ),第2部分:組織頁(yè)面的輸入
HTML5之input新增加的URL類型與email類型應(yīng)用
HTML 輸入類型
HTML經(jīng)典試題
HTML5項(xiàng)目筆記2:離線系統(tǒng)表單設(shè)計(jì)
JavaScript HTML DOM Input URL 對(duì)象
更多類似文章 >>
生活服務(wù)
分享 收藏 導(dǎo)長(zhǎng)圖 關(guān)注 下載文章
綁定賬號(hào)成功
后續(xù)可登錄賬號(hào)暢享VIP特權(quán)!
如果VIP功能使用有故障,
可點(diǎn)擊這里聯(lián)系客服!

聯(lián)系客服