响应式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 >标签来创建。

相关推荐
牛奶9 分钟前
JS随笔:浏览器 API(DOM 与 BOM)
前端·javascript·面试
用泥种荷花17 分钟前
【LangChain.js学习】 会话记忆(临时/长期)全解析
前端
慢慢长大的孩子21 分钟前
原生Android开发与JS桥开发对比分析
前端·后端
爱勇宝23 分钟前
2026年前端生存规划:只会写页面的人,正在被悄悄淘汰
前端·后端·架构
牛奶24 分钟前
JS随笔:异步编程与事件循环
前端·javascript·面试
牛奶25 分钟前
JS随笔:数据结构与集合
前端·javascript·面试
小陆猿35 分钟前
股票实时行情Echarts动态图表
前端·javascript
Dilettante2581 小时前
React Server Components 全链路解析:Next.js 构建产物、导航流程与 Payload 格式
前端·next.js
前端付豪1 小时前
Nest 项目小实践之注册登陆
前端·node.js·nestjs
用户9121917620611 小时前
日本股票K线图生成实战:基于API的完整对接方案
前端