HTML5教程之datalist标签自动补全

datalist标签:

datalist介绍:datalist一般不会独行江湖,它需要与input标签的搭配使用,就像label标签与input标签搭配使用一样。既然与input标签搭配使用,那么这两个标签之间必定存在着“特殊的关系”,不然input与datalist就互不相认了,那么如何才能让他们建立起来这种关系呢?这个时候我们需要一个新的属性list(注意,不是for),list与for的用法一样,list的值设置为表单元素的 id,这样他们便会自动关联了。

Chrome对此标签支持不好,Firefox和Opera可很好的支持。

datalist作用:

我们经常在网上的搜索框中看到当输入一个字符,输入框下方会自动列出你输入的关键词,比如Google或百度的搜索,如下图:

此效果非HTML5的datalist技术实现

datalist案例:

  1. <input list="w3cfuns-search" /> 
  2. <datalist id="w3cfuns-search"> 
  3.         <option value="W3Cfuns"> 
  4.         <option value="W3C标准"> 
  5.         <option value="W3C规则"> 
  6.         <option value="W3C验证"> 
  7.         <option value="前端开发"> 
  8.         <option value="前端开发网"> 
  9.         <option value="2天驾驭DIV+CSS"> 
  10.         <option value="W3CSchool"> 
  11. </datalist> 

datalist说明:

个人认为称呼datalist为自动补全列表更加合适,因为它并不是下拉列表。

转载请注明:代码家园 » HTML5教程之datalist标签自动补全

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)