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

相关推荐
michael_ouyang几秒前
IM 消息收发流程方案选型
前端·websocket·网络协议·typescript·electron
Y淑滢潇潇4 分钟前
WEB 作业 三个练习题
前端·javascript·css3
静小谢6 分钟前
前端mock假数据工具JSON Server使用笔记
前端·笔记·json
敲上瘾13 分钟前
用Coze打造你的专属AI应用:从智能体到Web部署指南
前端·人工智能·python·阿里云·aigc
EndingCoder22 分钟前
性能优化:类型系统的最佳实践
linux·前端·javascript·ubuntu·性能优化·typescript
毕设源码-朱学姐26 分钟前
【开题答辩全过程】以 基于web的生鲜农产品信息管理系统为例,包含答辩的问题和答案
前端
Hello.Reader26 分钟前
Flink 2.0 从 flink-conf.yaml 到 config.yaml 的正确打开方式(含迁移与最佳实践)
java·前端·flink
晚霞的不甘28 分钟前
Flutter for OpenHarmony:注入灵魂:购物车的数据驱动与状态管理实战
android·前端·javascript·flutter·前端框架
skywalk816333 分钟前
cbsd的clonos/control-pane web管理页面一直闪烁和网页打开显示500error 的问题解决(500error问题未解决)
服务器·前端·freebsd·cbsd
weixin_4365250736 分钟前
若依多租户版 - modules中创建子模块
java·服务器·前端