HTML5教程：datalist標簽詳解和實例代碼

2024-09-05 07:18:33

字體：大中小

來源：轉載

供稿：網友

網頁制作Webjx文章簡介：datalist一般不會獨行江湖，它需要與input標簽的搭配使用，就像label標簽與input標簽搭配使用一樣。既然與input標簽搭配使用，那么這兩個標簽之間必定存在著“特殊的關系”，不然input與datalist就互不相認了，那么如何才能讓他們建立起來這種關系呢？這個時候我們需要

注：在其它的一些教程或資料中datalist標簽稱為下拉列表，我認為這種叫法不夠準確，而且不能一下子理解此標簽。比如前段時間：“一個朋友問我datalist是不是一種能自定義樣式的select？”，后來才知道，有些書籍或教程中稱為下拉列表而導致初學者理解錯。那么此標簽怎么稱呼它才合適呢？咱們看完下面的案例后，我再說明：

datalist標簽：
datalist介紹：
datalist一般不會獨行江湖，它需要與input標簽的搭配使用，就像label標簽與input標簽搭配使用一樣。既然與input標簽搭配使用，那么這兩個標簽之間必定存在著“特殊的關系”，不然input與datalist就互不相認了，那么如何才能讓他們建立起來這種關系呢？這個時候我們需要一個新的屬性list（注意，不是for），list與for的用法一樣，list的值設置為表單元素的 id，這樣他們便會自動關聯了。

Chrome對此標簽支持不好，Firefox和Opera可很好的支持

datalist作用：
我們經常在網上的搜索框中看到當輸入一個字符，輸入框下方會自動列出你輸入的關鍵詞，比如Google或百度的搜索，如下圖：

此效果非HTML5的datalist技術實現

datalist案例：
<input list="Webjx.com-search" /> <datalist id="Webjx.com-search"> <option value="Webjx.com"> <option value="W3C標準"> <option value="W3C規則"> <option value="W3C驗證"> <option value="前端開發"> <option value="前端開發網"> <option value="2天駕馭DIV+CSS"> <option value="Webjx.Com"> </datalist>

datalist說明：
個人認為稱呼datalist為自動補全列表更加合適，因為它并不是下拉列表。

上一篇：HTML5是什么？如何鑒定HTML5產品？

下一篇：HTML5實例教程:OL標簽的start屬性和reversed屬性