DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML和Xhtml >> HTML5教程:datalist標簽詳解和實例代碼
HTML5教程:datalist標簽詳解和實例代碼
編輯:HTML和Xhtml     

注:在其它的一些教程或資料中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="poluoluo.com-search" />
  • <datalist id="poluoluo.com-search">
  • <option value="poluoluo.com">
  • <option value="W3C標准">
  • <option value="W3C規則">
  • <option value="W3C驗證">
  • <option value="前端開發">
  • <option value="前端開發網">
  • <option value="2天駕馭DIV+CSS">
  • <option value="poluoluo.Com">
  • </datalist>



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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved