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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/338864.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Typora + PicGo + GitHub搭建图床

Typora PicGo GitHub搭建图床 1. Typora下载破解 这一步自行百度 2. PicGo下载 PicGo is Here | PicGo 自行下载安即可 3. GitHub仓库设置 gitHub注册略过&#xff0c;如果不能访问请科学上网 创建仓库 生成访问token 点击右上角头像 -> setting -> 点击左边最…

C语言从入门到入坟

前言 1.初识程序 有穷性 在有限的操作步骤内完成。有穷性是算法的重要特性&#xff0c;任何一个问题的解决不论其采取什么样的算法&#xff0c;其终归是要把问题解决好。如果一种算法的执行时间是无限的&#xff0c;或在期望的时间内没有完成&#xff0c;那么这种算法就是无用…

万界星空科技MES系统的生产管理流程

对于生产型工厂来说&#xff0c;车间生产流程无疑是最重要的管理环节&#xff0c;繁琐的生产细节让企业很难找到合理的生产管理方法&#xff0c;导致人工效率低、错误多、成本高。如果想要解决这些问题&#xff0c;工厂就必须要有一套自己的生产管理系统&#xff0c;这样才能提…

为什么单片机不能直接驱动继电器和电磁阀?

为什么单片机不能直接驱动继电器和电磁阀&#xff1f; 在开始前我有一些资料&#xff0c;是我根据网友给的问题精心整理了一份「单片机的资料从专业入门到高级教程」&#xff0c; 点个关注在评论区回复“888”之后私信回复“888”&#xff0c;全部无偿共享给大家&#xff01;&…

HarmonyOS鸿蒙应用开发(三、轻量级配置存储dataPreferences)

在应用开发中存储一些配置是很常见的需求。在android中有SharedPreferences&#xff0c;一个轻量级的存储类&#xff0c;用来保存应用的一些常用配置。在HarmonyOS鸿蒙应用开发中&#xff0c;实现类似功能的也叫首选项&#xff0c;dataPreferences。 相关概念 ohos.data.prefe…

利用AI制作桌游卡牌的个人实践

一、引言&#xff1a; ChatGPT ChatGPT是由OpenAI开发的一款基于GPT&#xff08;生成式预训练变换器&#xff09;架构的人工智能语言模型。GPT-4&#xff0c;是ChatGPT中使用的最新版本&#xff0c;具有以下特点&#xff1a; 1. **语言理解与生成能力**&#xff1a;ChatGPT擅…

Window安装Python和开发Pycharm

准备&#xff1a; 1&#xff1a;安装Python环境 https://www.python.org/downloads/windows/ 2: 下载Pycharm https://www.jetbrains.com/pycharm/download/other.html

记录 | vscode launch.json和task.json的用途用法

Tasks.json 按编译逻辑来说&#xff0c;先讲tasks.json 先贴图&#xff1a; "label"&#xff1a; 对应launch.json中的 "preLaunchTask"&#xff1b;&#xff08;一定要一致&#xff0c;决定了launch.json之前先运行哪个配置&#xff0c;tasks是一个arra…

Oracle Linux 6.10 安装图解

风险告知 本人及本篇博文不为任何人及任何行为的任何风险承担责任&#xff0c;图解仅供参考&#xff0c;请悉知&#xff01;本次安装图解是在一个全新的演示环境下进行的&#xff0c;演示环境中没有任何有价值的数据&#xff0c;但这并不代表摆在你面前的环境也是如此。生产环境…

分布式环境下流控技术汇总

本篇主要是对分布式环境流控技术、原理、使用场景做个简要的汇总&#xff0c;包括&#xff1a;固定时间窗口算法&#xff0c;滑动时间窗口算法&#xff0c;漏桶算法&#xff0c;令牌桶算法&#xff0c;分布式消息中间件&#xff0c;流控与熔断利器Sentinel。 1. 前言 在流量控…

k8s1.27.2版本二进制高可用集群部署

文章目录 环境软件版本服务器系统初始化设置关于etcd签名证书etcd集群部署负载均衡器组件安装设置关于k8s自签证书自签CAkube-apiserver 自签证书kube-controller-manager自签证书kube-scheduler自签证书kube-proxy 自签证书admin 自签证书 控制平面节点组件部署**部署kube-api…

linux C语言socket函数recv

recv 函数是在 Linux C 语言网络编程中用于从已连接的套接字接收数据的函数。它通常与 TCP 连接一起使用&#xff0c;但也可以用于 UDP&#xff08;尽管对于 UDP&#xff0c;更常使用 recvfrom&#xff0c;因为它还可以接收发送方的地址信息&#xff09;。 函数原型 recv 函数…

HNU-数据挖掘-实验1-实验平台及环境安装

数据挖掘课程实验实验1 实验平台及环境安装 计科210X 甘晴void 202108010XXX 文章目录 数据挖掘课程实验<br>实验1 实验平台及环境安装实验背景实验目标实验步骤1.安装虚拟机和Linux平台&#xff0c;熟悉Ubuntu环境。2.在Linux平台上搭建Python平台&#xff0c;并安装…

26、江科大stm32视频学习笔记——W25Q64简介

一、电路图 1、软件模拟的SPI&#xff1a;线可以任意接 2、硬件模拟的SPI&#xff1a;要按以下方式连接 3、本次软件模拟和硬件模拟使用同一个电路图&#xff0c;方便切换 CS&#xff08;片选&#xff09;&#xff1a;PA4 DO&#xff08;从…

Unity学习之坦克游戏制作(1)开始场景的制作

文章目录 1. 实现效果2. 场景装饰2.1 创建场景2.2 拖入场景地板 3 开始界面3.1 导入UI3.2 创建面板基类3.2.1 开始按钮 4 设置界面5 音效数据逻辑5.1 音效数据可持久化5.2 声明音效管理的主要变量5.3 声明数据管理器5.4 在设置面板的数据初始化5.5 提供API给外部 6 排行榜界面6…

Prompt高级技巧:Few-Shots、COT、SC、TOT、Step-Back

CRISPE框架 如图所示。所谓CRISPE框架&#xff0c;指的是&#xff1a; CR&#xff1a;Capacity and Role&#xff08;能力与角色&#xff09;。你希望 ChatGPT 扮演怎样的角色。I&#xff1a;Insight&#xff08;洞察&#xff09;&#xff0c;背景信息和上下文。S:&#xff08…

【Springboot】日志

1.日志的使用 日志主要用于记录程序运行的情况。我们从学习javase的时候就使用System.out.println();打印日志了&#xff0c;通过打印的日志来发现和定位问题&#xff0c;或根据日志来分析程序运行的过程。在Spring的学习中,也经常根据控制台的⽇志来分析和定位问题 。 日志除…

HarmonyOS开源软件Notice收集策略说明

开源软件Notice是与项目开源相关的文件&#xff0c;收集这些文件的目的是为了符合开源的规范。 收集目标 只收集打包到镜像里面的模块对应的License&#xff1b;不打包的都不收集&#xff0c;比如构建过程使用的工具&#xff08;如clang、python、ninja等&#xff09;都是不收…

k8s 部署 Nginx 并代理到tomcat

一、已有信息 [rootmaster nginx]# kubectl get nodes -o wide [rootmaster nginx]# kubectl get svc NAME TYPE CLUSTER-IP EXTERNAL-IP PORT(S) AGE kubernetes ClusterIP 10.96.0.1 <none> 443/TCP 2…

【51单片机】LED 点阵

0、前言 参考&#xff1a;普中 51 单片机开发攻略 第13章 1、硬件 2、软件 mian.c #include <reg52.h> #include <intrins.h> #include "delayms.h"typedef unsigned char u8; typedef unsigned int u16;//定义相应的IO口 #define LED_M P0//LED点阵…