小編給大家分享一下html5中新增的表單控件和屬性有哪些,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
成都創(chuàng)新互聯(lián)公司IDC提供業(yè)務(wù):德陽(yáng)機(jī)房托管,成都服務(wù)器租用,德陽(yáng)機(jī)房托管,重慶服務(wù)器租用等四川省內(nèi)主機(jī)托管與主機(jī)租用業(yè)務(wù);數(shù)據(jù)中心含:雙線機(jī)房,BGP機(jī)房,電信機(jī)房,移動(dòng)機(jī)房,聯(lián)通機(jī)房。
HTML5是互聯(lián)網(wǎng)的下一代標(biāo)準(zhǔn),是構(gòu)建以及呈現(xiàn)互聯(lián)網(wǎng)內(nèi)容的一種語(yǔ)言方式.被認(rèn)為是互聯(lián)網(wǎng)的核心技術(shù)之一。
HTML5是Web中核心語(yǔ)言HTML的規(guī)范,用戶使用任何手段進(jìn)行網(wǎng)頁(yè)瀏覽時(shí)看到的內(nèi)容原本都是HTML格式的,在瀏覽器中通過(guò)一些技術(shù)處理將其轉(zhuǎn)換成為了可識(shí)別的信息。HTML5在從前HTML4.01的基礎(chǔ)上進(jìn)行了一定的改進(jìn),雖然技術(shù)人員在開(kāi)發(fā)過(guò)程中可能不會(huì)將這些新技術(shù)投入應(yīng)用,但是對(duì)于該種技術(shù)的新特性,網(wǎng)站開(kāi)發(fā)技術(shù)人員是必須要有所了解的。
新的輸入性表單控件:
email:電子郵箱文本框,跟普通的沒(méi)什么區(qū)別
- 當(dāng)輸入不是郵箱的時(shí)候,驗(yàn)證不通過(guò)
- 移動(dòng)端的鍵盤(pán)會(huì)發(fā)生變化
tel:電話號(hào)碼
url:網(wǎng)頁(yè)的URL
search:搜索引擎
- chrome下輸入文字后,會(huì)多出一個(gè)關(guān)閉的X
range:特定范圍內(nèi)的數(shù)值選擇器
- min、max、step(步數(shù))
- 例子: 用js來(lái)顯示當(dāng)前數(shù)值
number:只能包含數(shù)字的輸入框
- 輸入框末尾有兩個(gè)箭頭 上為加 下為減
color:顏色選擇器
- 點(diǎn)擊顯示顏色版
datetime:顯示完整日期
- 類似select選擇樣式
datetime-local:顯示完整日期, 不包含時(shí)區(qū)
time:顯示時(shí)間,不含時(shí)區(qū)
date:顯示日期{年月日}
week:顯示周{年月日周}
mouth:顯示月{年月}
<form> <input type="email" /> <input type="tel" /> <input type="url" /> <input type="search" /> <!--一個(gè)滑塊加一根長(zhǎng)條 min最小表示數(shù) max最大表示數(shù) step 劃一格跳幾個(gè)數(shù)字--> <input type="range" min="1" max="10" step="2"/> <!----> <input type="number" /> <input type="color" /> <input type="submit" /> </form>
新的表單特性和函數(shù)
placeholder:輸入框提示信息
- 例子:微博的密碼框提示
autocomplete
- 默認(rèn)為on,關(guān)閉提示選擇off
autofocus:指定表單獲取輸入焦點(diǎn)
list和datalist:為輸入框構(gòu)造一個(gè)選擇列表
- list值為datalist標(biāo)簽的id
required:此選項(xiàng)必填, 不能為空
Pattern:正則驗(yàn)證
- pattern=“\d{1,5}”
Formaction在submit里定義提交地址
<input type="text" placeholder="請(qǐng)輸入4-16個(gè)字符" // 輸入框內(nèi)顯示 autocomplete="off" // 是否記錄輸入的值 autofocus // 聚焦 required // 輸入框不能為空 pattern="\d{1,5}" // 必須輸入1到5個(gè)數(shù)字 /> // required 和 pattern 具有安全隱患 如果在控制臺(tái)修改input的pattern和required 那么就可以破除校驗(yàn) // 如果用戶在某個(gè)頁(yè)面輸入相當(dāng)多的數(shù)據(jù),臨時(shí)有事需要離開(kāi)一段時(shí)間,此時(shí)數(shù)據(jù)應(yīng)該保存至草稿箱,那么同一個(gè)form表單下,將會(huì)有兩個(gè)不同地址的sumbit提交 ope瀏覽器已支持 其余瀏覽器可能不支持 <form action="https://www.baidu.com"> <input type="text"> <input type="submit" value="提交" /> <input type="submit" value="保存至草稿箱" formaction="http://www.miaov.com"/> </form>
以上是“html5中新增的表單控件和屬性有哪些”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
網(wǎng)頁(yè)名稱:html5中新增的表單控件和屬性有哪些
網(wǎng)站鏈接:http://bm7419.com/article26/jdiojg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供品牌網(wǎng)站設(shè)計(jì)、定制開(kāi)發(fā)、網(wǎng)站排名、網(wǎng)站制作、全網(wǎng)營(yíng)銷推廣、用戶體驗(yàn)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(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)