這篇文章主要為大家展示了HTML5中datalist標(biāo)簽有什么用,內(nèi)容簡而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶大家一起來研究并學(xué)習(xí)一下“HTML5中datalist標(biāo)簽有什么用”這篇文章吧。
1、簡易性:超級文本標(biāo)記語言版本升級采用超集方式,從而更加靈活方便,適合初學(xué)前端開發(fā)者使用。 2、可擴展性:超級文本標(biāo)記語言的廣泛應(yīng)用帶來了加強功能,增加標(biāo)識符等要求,超級文本標(biāo)記語言采取子類元素的方式,為系統(tǒng)擴展帶來保證。 3、平臺無關(guān)性:超級文本標(biāo)記語言能夠在廣泛的平臺上使用,這也是萬維網(wǎng)盛行的一個原因。 4、通用性:HTML是網(wǎng)絡(luò)的通用語言,它允許網(wǎng)頁制作人建立文本與圖片相結(jié)合的復(fù)雜頁面,這些頁面可以被網(wǎng)上任何其他人瀏覽到,無論使用的是什么類型的電腦或瀏覽器。
datalist標(biāo)簽:
datalist介紹:
datalist一般不會獨行江湖,它需要與input標(biāo)簽的搭配使用,就像label標(biāo)簽與input標(biāo)簽搭配使用一樣。既然與input標(biāo)簽搭配使用,那么這兩個標(biāo)簽之間必定存在著“特殊的關(guān)系”,不然input與datalist就互不相認(rèn)了,那么如何才能讓他們建立起來這種關(guān)系呢?這個時候我們需要一個新的屬性list(注意,不是for),list與for的用法一樣,list的值設(shè)置為表單元素的 id,這樣他們便會自動關(guān)聯(lián)了。
Chrome對此標(biāo)簽支持不好,F(xiàn)irefox和Opera可很好的支持
datalist作用:
我們經(jīng)常在網(wǎng)上的搜索框中看到當(dāng)輸入一個字符,輸入框下方會自動列出你輸入的關(guān)鍵詞,比如Google或百度的搜索,如下圖:
此效果非HTML5的datalist技術(shù)實現(xiàn)
datalist案例:
<input list="w3cfuns-search" /> <datalist id="w3cfuns-search"> <option value="W3Cfuns"> <option value="W3C標(biāo)準(zhǔn)"> <option value="W3C規(guī)則"> <option value="W3C驗證"> <option value="前端開發(fā)"> <option value="前端開發(fā)網(wǎng)"> <option value="W3CSchool"> </datalist>
datalist說明:
個人認(rèn)為稱呼datalist為自動補全列表更加合適,因為它并不是下拉列表。
以上就是關(guān)于“HTML5中datalist標(biāo)簽有什么用”的內(nèi)容,如果改文章對你有所幫助并覺得寫得不錯,勞請分享給你的好友一起學(xué)習(xí)新知識,若想了解更多相關(guān)知識內(nèi)容,請多多關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
當(dāng)前題目:HTML5中datalist標(biāo)簽有什么用-創(chuàng)新互聯(lián)
路徑分享:http://chinadenli.net/article16/jgjdg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供營銷型網(wǎng)站建設(shè)、響應(yīng)式網(wǎng)站、網(wǎng)站改版、App開發(fā)、品牌網(wǎng)站建設(shè)、關(guān)鍵詞優(yōu)化
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容