小码哥的IT人生

HTML <datalist> 标签 详解

HTML基础 2022-06-02 09:39:40小码哥的IT人生shichen

HTML <datalist> 标签

实例

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

<input id="myCar" list="cars" />
<datalist id="cars">
  <option value="BMW">
  <option value="Ford">
  <option value="Volvo">
</datalist>

 

完整实例【亲自试一试】:

<!DOCTYPE html>
<html>
<body>
<h1>input list 属性</h1>
<p>list 属性引用包含 input 元素的预定义选项的 datalist 元素。</p>
<form action="/demo/demo_form.php">
  <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>
  <input type="submit" value="Submit">
</form>
<p><b>注释:</b>Safari 12.0(或更早版本)不支持 datalist 标签。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html

定义和用法

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

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

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

浏览器支持

元素 Chrome IE Firefox Safari Opera
<datalist> 20.0 10.0 4.0 12.1 9.5

HTML 4.01 与 HTML 5 之间的差异

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

全局属性

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

事件属性

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

相关页面

HTML DOM 参考手册:Datalist 对象

版权所有 © 小码哥的IT人生
Copyright © phpcodeweb All Rights Reserved
ICP备案号:苏ICP备17019232号-2  

苏公网安备 32030202000762号

© 2021-2024