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

相关推荐
布列瑟农的星空3 小时前
前端都能看懂的Rust入门教程(三)——控制流语句
前端·后端·rust
Mr Xu_3 小时前
Vue 3 中计算属性的最佳实践:提升可读性、可维护性与性能
前端·javascript
jerrywus3 小时前
我写了个 Claude Code Skill,再也不用手动切图传 COS 了
前端·agent·claude
玖月晴空3 小时前
探索关于Spec 和Skills 的一些实战运用-Kiro篇
前端·aigc·代码规范
子兮曰3 小时前
深入理解滑块验证码:那些你不知道的防破解机制
前端·javascript·canvas
会一丢丢蝶泳的咻狗4 小时前
Sass实现,蛇形流动布局
前端·css
攀登的牵牛花4 小时前
前端向架构突围系列 - 状态数据设计 [8 - 4]:有限状态机 (FSM) 在复杂前端逻辑中的应用
前端
Lsx_4 小时前
前端视角下认识 AI Agent 和 LangChain
前端·人工智能·agent
我是伪码农4 小时前
Vue 智慧商城项目
前端·javascript·vue.js
不认输的西瓜4 小时前
fetch-event-source源码解读
前端·javascript