响应式Web开发项目教程(HTML5+CSS3+Bootstrap)第2版 例4-7 datalist

代码

<!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. TCP协议是安全的吗?

    2024-01-22 13:34:02       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-01-22 13:34:02       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-01-22 13:34:02       19 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-01-22 13:34:02       20 阅读

热门阅读

  1. 用go语言删除重复文件

    2024-01-22 13:34:02       36 阅读
  2. Vue.js:构建用户界面的渐进式框架

    2024-01-22 13:34:02       28 阅读
  3. 华为网络设备常用命令大全

    2024-01-22 13:34:02       44 阅读
  4. Vue 批量注册全局组件

    2024-01-22 13:34:02       34 阅读
  5. props传值

    2024-01-22 13:34:02       37 阅读
  6. Spring与Spring Boot:区别与Spring Boot的实战示例

    2024-01-22 13:34:02       29 阅读
  7. MySQL的MVCC

    2024-01-22 13:34:02       25 阅读
  8. unity3d在汽车领域的未来发展趋势浅谈

    2024-01-22 13:34:02       28 阅读
  9. Spring data都包含哪些内容

    2024-01-22 13:34:02       27 阅读