• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • <datalist>

    版本:HTML5

    HTML<datalist>元素包含了一组<option>元素,这些元素表示其它表单控件可选值.

    浏览器支持

    IE 10、Firefox、Opera 和 Chrome 支持<datalist>标签。
    注释:IE 9 和更早版本的 IE 浏览器以及 Safari 不支持<datalist>标签。

    示例

    <label>choose a browser from this list:
    <input list="browsers" name="mybrowser" /></label>
    <datalist id="browsers">
     <option value="chrome">
     <option value="firefox">
     <option value="internet explorer">
     <option value="opera">
     <option value="safari">
    </datalist>
    

    定义和用法

    <datalist>标签定义可选数据的列表。

    标签定义及使用说明

    • <datalist>标签规定了<input>元素可能的选项列表。与<input>元素配合使用,就可以制作出输入值的下拉列表。
    • <datalist>标签被用来在为<input>元素提供"自动完成"的特性。用户能看到一个下拉列表,里边的选项是预先定义好的,将作为用户的输入数据。
    • 请使用<input>元素的list属性来绑定<datalist>元素。
    内容分类流式内容元素,段落内容
    允许的内容段落内容,0个或多个<option>元素
    标签省略开始标签和结束标签都不能省略。
    允许的父元素任何接受段落内容的元素
    允许的ARIA角色None
    DOM接口HTMLDataListElement

    属性

    属性描述
    datavalue供自动插入数据。

    HTML 4.01 与 HTML 5 之间的差异

    <datalist>标签是 HTML 5 中的新标签。

    全局属性

    <datalist>标签支持HTML的全局属性。

    事件属性

    <datalist>标签支持HTML的事件属性。

    例子

    <input id="mycar" list="cars" />
    <datalist id="cars">
      <option value="bmw">
      <option value="ford">
      <option value="volvo">
    </datalist>
    

    下面是一个<input>元素,<datalist>中描述了其可能的值:

    <input list="browsers">
    <datalist id="browsers">
    	<option value="internet explorer">
    	<option value="firefox">
    	<option value="chrome">
    	<option value="opera">
    	<option value="safari">
    </datalist>
    

    上篇:<button>

    下篇:<textarea>