响应式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 分钟前
35 岁程序员的绝地求生计划:你准备好了吗?
前端·后端·面试
道可到10 分钟前
国内最难入职的 IT 公司排行:你敢挑战哪一家?
前端·后端·面试
jnpfsoft12 分钟前
低代码应用菜单避坑指南:新建 / 删除 / 导入全流程,路由重复再也不怕!
前端·低代码
Keepreal49612 分钟前
word文件预览实现
前端·javascript·react.js
郝开12 分钟前
5. React中的组件:组件是什么;React定义组件
前端·javascript·react.js
我是天龙_绍12 分钟前
uniapp 中的 #ifndef 条件编译
前端
white-persist14 分钟前
SQL 注入详解:从原理到实战
前端·网络·数据库·sql·安全·web安全·原型模式
FuckPatience17 分钟前
电脑所有可用的网络接口
前端·javascript·vue.js
索马里亚纳海参炒贩18 分钟前
Rust、C++语言桌面开发框架有哪些?
前端
道可到22 分钟前
程序员养生十大违章:你中了几条?
前端·后端·面试