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

相关推荐
摸鱼仙人~几秒前
React Ref 指南:原理、实现与实践
前端·javascript·react.js
teeeeeeemo2 分钟前
回调函数 vs Promise vs async/await区别
开发语言·前端·javascript·笔记
贵沫末20 分钟前
React——基础
前端·react.js·前端框架
aklry32 分钟前
uniapp三步完成一维码的生成
前端·vue.js
Rubin9339 分钟前
判断元素在可视区域?用于滚动加载,数据埋点等
前端
爱学习的茄子40 分钟前
AI驱动的单词学习应用:从图片识别到语音合成的完整实现
前端·深度学习·react.js
用户38022585982440 分钟前
使用three.js实现3D地球
前端·three.js
程序无bug42 分钟前
Spring 面向切面编程AOP 详细讲解
java·前端
zhanshuo42 分钟前
鸿蒙UI开发全解:JS与Java双引擎实战指南
前端·javascript·harmonyos
撰卢1 小时前
如何提高网站加载速度速度
前端·javascript·css·html