我們先來看看html5 datalist標簽的用法：

datalist 標簽定義選項列表。請與input元素配合使用該元素，來定義input可能的值。

datalist及其選項不會被顯示出來，它僅僅是合法的輸入值列表。

請使用input元素的list屬性來綁定datalist。

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

現在來看個html5 datalist標簽的實例：

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

 input id= myCar list= cars /  datalist id= cars  option value= PHP   option value= html  option value= 尋夢  /datalist 

這個在瀏覽器中顯示如下：

這是沒任何動作的效果，是一個輸入框，現在我們再來看看把鼠標移上去之后點擊的效果：

你看，效果出來了。這就是html5 datalist標簽的基礎用法。

input輸入框的list屬性值是datalist的id，這樣datalist才能和input輸入框關聯起來。 datalist自身并不顯示，只在需要配合input輸入時才會自動顯示出來。

再來個html5 datalist標簽的用法實例：

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

html5 datalist標簽的代碼實例：

 !DOCTYPE html  html  head  title HTML5 datalist tag /title  meta charset= utf-8  /head  瀏覽器版本： input list= words  datalist id= words  option value= Internet Explorer  option value= Firefox  option value= Chrome  option value= Opera  option value= Safari  option value= Sogou  option value= Maxthon  /datalist  /body  /html 

效果如圖所示：

這是點擊之后的效果，這樣的選項框是不是很好，是一個經常用的選項框。

好了，以上就是這篇關于html5 datalist標簽的介紹了，有問題的可以在下方提問。

【小編推薦】

html空格代碼怎么寫？html空格代碼的表現方式總結

html中col標簽中的漢字如何居中？html col標簽的基本使用(內有實例)

以上就是html5 datalist標簽的用法是什么？這里有datalist標簽的用法實例的詳細內容，其它編程語言

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。