本篇文章主要為大家講述了關于html5 datalist標簽的用法及html5 datalist標簽的用法實例。本文說了兩個常用的選項框的實例供大家選擇觀看，下面就讓我們一起來看這篇文章吧

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

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

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

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

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

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

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

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

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

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

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

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

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

html5 datalist標簽的代碼實例：

HTML5 datalist tag

瀏覽器版本：