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

相关推荐
yume_sibai5 分钟前
ES6 核心知识点完全总结(变量 + 箭头函数 + 解构 + Promise + 模块化)
前端·ecmascript·es6
Moment17 分钟前
为什么市面上的 coding agent 大多数都基于Nodejs?
前端·后端·面试
吃瓜的猹27 分钟前
Gemini 3.8 Flash 是真的站起来了,一起来看看我到底做了什么吧~
前端
光影少年27 分钟前
React18 对RN 的影响
android·前端·react.js·ios·前端框架
tryCbest36 分钟前
Vue Router学习及使用
前端·vue.js
杉氧37 分钟前
丝滑的奥秘:Reanimated 3 动画引擎与手势处理(Gesture Handler)
android·前端·react native
用户970161501681 小时前
浏览器切到后台后,AI 给我的代码就失效了:我拿 3 个模型测了 6 个定时器坑
前端·代码规范
蓝星空20001 小时前
GPT Image 2.5 生图模型已上线,支持 Flare 与 Sunburst 型号选择
前端·gpt·aigc·image2·imagen
何何____1 小时前
js常见继承方法详解
前端·javascript
parade岁月1 小时前
Tailwind CSS 加入 Shopify,正在用 Tailwind 的项目要不要调整?
前端