[html5教程]HTML5新控件datalist输入框输入提示

更新时间:2020-03-11    来源:html5教程    手机版     字体:

【www.bbyears.com--html5教程】

定义和用法

标签定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。

datalist 及其选项不会被显示出来,它仅仅是合法的输入值列表。

请使用 input 元素的 list 属性来绑定 datalist。

新的元素可以让你在普通文本框中添加一个下拉提示列表。你可以选择输入,也可以自由输入(输入的同时,下方会自动显示出匹配的建议项)。

原文:HTML5新控件 - 输入框输入提示<datalist>


支持的浏览器:Chrome,Firefox,Opera,新版IE(从IE10开始)

不支持的浏览器:Safari,旧版本IE(包括IE9)

使用方式:需要和配合使用。是完全不可见的,将其放在页面任意位置(通常在input后面)。然后将元素的list属性设定为的ID即可。

 

 代码如下

   

需要注意的是,input输入框的list属性值是datalist的id,这样datalist才能和input输入框关联起来,在之前介绍range类型时曾见到提到过它。 datalist自身并不显示,只在需要配合input输入时才会自动显示出来

本文来源:http://www.bbyears.com/wangyezhizuo/86383.html