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

相关推荐
wjcroom几秒前
融释涡旋理论-对狭义相对论和洛伦兹变换的兼容
开发语言·前端
2601_955354464 分钟前
SEO新手如何快速入门学习
前端·学习·搜索引擎
小和尚敲木头4 分钟前
router.push(‘/‘)跳转不触发重定向
开发语言·前端·javascript
misty youth5 分钟前
提示词合集【自用】
开发语言·前端·ai编程
zzginfo5 分钟前
ES6 中的 “?.” 可选链运算符用法
前端·ecmascript·es6
战族狼魂9 分钟前
Claude Code 源码泄露事件
前端·npm·node.js
We་ct11 分钟前
LeetCode 67. 二进制求和:详细题解+代码拆解
前端·数据结构·算法·leetcode·typescript
还是大剑师兰特11 分钟前
为什么要用 import.meta.glob 加载 SVG 图标库
开发语言·前端·javascript
渣渣xiong12 分钟前
《从零开始:前端转型AI agent直到就业第三天》
前端·ai编程
qiuge67813 分钟前
一网打尽react手写题(上)
前端·javascript·react.js