這篇文章主要介紹了html5中datalist標(biāo)簽怎么用，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

成都創(chuàng)新互聯(lián)公司專業(yè)為企業(yè)提供玉屏網(wǎng)站建設(shè)、玉屏做網(wǎng)站、玉屏網(wǎng)站設(shè)計(jì)、玉屏網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、玉屏企業(yè)網(wǎng)站模板建站服務(wù)，10年玉屏做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

我們先來(lái)看看html5 datalist標(biāo)簽的用法：

datalist及其選項(xiàng)不會(huì)被顯示出來(lái)，它僅僅是合法的輸入值列表。

請(qǐng)使用input元素的list屬性來(lái)綁定datalist。

可用性：datalist:可選擇可輸入的列表（比select下拉列表方便，只能）

現(xiàn)在來(lái)看個(gè)html5 datalist標(biāo)簽的實(shí)例：

下面是一個(gè) input 元素，datalist 中描述了其可能的值：

input輸入框的list屬性值是datalist的id，這樣datalist才能和input輸入框關(guān)聯(lián)起來(lái)。 datalist自身并不顯示，只在需要配合input輸入時(shí)才會(huì)自動(dòng)顯示出來(lái)。

再來(lái)個(gè)html5 datalist標(biāo)簽的用法實(shí)例：

在Web設(shè)計(jì)中,經(jīng)常會(huì)用到如輸入框的自動(dòng)下拉提示,這將大大方便用戶的輸入。在以前，如果要實(shí)現(xiàn)這樣的功能，必須要求開發(fā)者使用一些Javascript的技巧或相關(guān)的框架進(jìn)行ajax調(diào)用，需要一定的編程工作量。但隨著HTML5的慢慢普及，開發(fā)者可以使用其中的新的datalist標(biāo)記就能快速開發(fā)出十分漂亮的autocomplete組件的效果

html5 datalist標(biāo)簽的代碼實(shí)例：

        瀏覽器版本：

效果如圖所示：

這是點(diǎn)擊之后的效果，這樣的選項(xiàng)框是不是很好，是一個(gè)經(jīng)常用的選項(xiàng)框。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享html5中datalist標(biāo)簽怎么用內(nèi)容對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，遇到問題就找創(chuàng)新互聯(lián)，詳細(xì)的解決方法等著你來(lái)學(xué)習(xí)!