HTML <datalist> 标签 - 蝴蝶教程

<datalist>标签定义和用法

<datalist>标记指定<input>元素的预定义选项列表。 <datalist>标记用于在<input>元素上提供“自动完成”功能。用户在输入数据时会看到预定义选项的下拉列表。使用<input>元素的list属性将其与<datalist>元素绑定在一起。

<datalist>浏览器支持

Internet Explorer/Edge	Chrome	FireFox	Safari	Opera

10.0（含）以上	20.0（含）以上	4.0（含）以上	不支持	9.0（含）以上

<datalist>实例

<!DOCTYPE html>
<html>
<body>

<form action="/jc_script/action.php" method="get">
  <input list="browsers" name="browser">
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
  <button type="submit">提交</button>
</form>

<p><strong>注意:</strong> datalist标记在Internet Explorer 9和早期版本或Safari中不受支持。</p>

</body>
</html>

尝试一下

<datalist>HTML4.01和HTML5之间的差异

<datalist>标记是HTML5中的新标记。

<datalist>全局属性

<datalist>标签还支持全局属性。查看有关全局属性的更多知识。

<datalist>事件属性

<datalist>标签还支持事件属性。查看有关事件属性的更多知识。

<datalist>默认CSS设置

datalist { 
    display: none;
}