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

相关推荐
一只小透明啊啊啊啊1 小时前
Java Web 开发的核心组件:Servlet, JSP,Filter,Listener
java·前端·servlet
你的人类朋友2 小时前
设计模式有哪几类?
前端·后端·设计模式
Yeats_Liao2 小时前
Go Web 编程快速入门 10 - 数据库集成与ORM:连接池、查询优化与事务管理
前端·数据库·后端·golang
啃火龙果的兔子3 小时前
前端八股文react篇
前端·react.js·前端框架
打小就很皮...3 小时前
React 实现 i18next 中英文切换集成
前端·react.js·i18next
拉不动的猪3 小时前
函数组件和异步组件
前端·javascript·面试
淮北4943 小时前
html + css +js
开发语言·前端·javascript·css·html
你的人类朋友3 小时前
适配器模式:适配就完事了bro!
前端·后端·设计模式
Setsuna_F_Seiei3 小时前
CocosCreator 游戏开发 - 利用 AssetsBundle 技术对小游戏包体积进行优化
前端·cocos creator·游戏开发
黄毛火烧雪下3 小时前
高效的项目构建和优化之前端构建工具
前端