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

相关推荐
用户69371750013841 分钟前
315曝光AI搜索问题:GEO技术靠内容投喂操控答案,新型营销操作全揭秘
android·前端·人工智能
周星星日记7 分钟前
pnpm为什么成为"最先进的管理包工具"
前端
多厘9 分钟前
使用 opencode 和灵感写一个 mac App (实操版)
前端·github
Wect10 分钟前
LeetCode 918. 环形子数组的最大和:两种解法详解
前端·算法·typescript
炫饭第一名13 分钟前
从前端视角解读 OpenClaw(上):Lit 驱动的 AI 控制网关面板
前端·人工智能·前端框架
掘金者阿豪13 分钟前
MiGPT GUI给小爱音箱装「AI 大脑」,自定义人设 + 百变音色!cpolar 内网穿透实验室第 726 个成功挑战
前端·后端
滴滴答答哒17 分钟前
layui响应式表单上下结构
前端·javascript·layui
天问一21 分钟前
Cesium 中 PointPrimitiveCollection 与 primitives 的结合使用
前端
小村儿23 分钟前
觉醒的agent:AI为何抛弃React和Vue,自创Aether框架
前端·agent·ai编程
小J听不清31 分钟前
CSS 文本样式全解析:颜色 / 对齐 / 装饰 / 缩进
前端·javascript·css·html·css3