响应式Web开发项目教程(HTML5+CSS3+Bootstrap)第2版 例4-7 datalist

代码

html 复制代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>datalist</title>
</head>

<body>
<input id="address" list="addressList">
<datalist id="addressList">
  <option value="北京"></option>
  <option value="上海"></option>
  <option value="深圳"></option>
</datalist>
</body>
</html>

上述代码中,

第9行代码定义id值为address,list属性为addressList的input元素;

第10~14行代码定义id值为addressList的datalist元素,使得该元素与input元素绑定到一起。

运行效果

< datalist >标签用于定义输入域的选项列表,痛过id属性与< input >标签关联,用来配合定义< input >标签可能的值。列表通过< datalist >标签嵌套< option >标签来创建。

相关推荐
有诺千金17 分钟前
VUE3入门很简单(4)---组件通信(props)
前端·javascript·vue.js
2501_9447114318 分钟前
Vue-路由懒加载与组件懒加载
前端·javascript·vue.js
雨季66644 分钟前
Flutter 三端应用实战:OpenHarmony “心流之泉”——在碎片洪流中,为你筑一眼专注的清泉
开发语言·前端·flutter·交互
换日线°1 小时前
前端3D炫酷展开效果
前端·3d
广州华水科技1 小时前
大坝变形监测的单北斗GNSS技术应用与发展分析
前端
Dontla1 小时前
浏览器localStorage共享机制介绍(持久化客户端存储方案)本地存储冲突、iframe、XSS漏洞、命名空间隔离
前端·网络·xss
霍理迪1 小时前
JS其他常用内置对象
开发语言·前端·javascript
tao3556671 小时前
HTML-03-HTML 语义化标签
前端·html
小马_xiaoen1 小时前
IndexedDB 从入门到实战:前端本地大容量存储解决方案。
前端
jiayong231 小时前
Vue2 与 Vue3 常见面试题精选 - 综合宝典
前端·vue.js·面试