HTML5的新增表单元素

news2024/11/18 23:24:28

HTML5 有以下新的表单元素:

  • <datalist>

  • <keygen>

  • <output>

datalist

datalist 元素规定输入域的选项列表。

datalist属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时,浏览器应该在该域中显示填写的选项:

使用 input元素的列表属性与datalist元素绑定.

演示代码:

<input list="arr" name="demo" />
    <datalist id="arr">
      <option value="arr1"></option>
      <option value="arr2"></option>
      <option value="arr3"></option>
      <option value="arr4"></option>
      <option value="arr5"></option>
    </datalist>

效果:

keygen

keygen元素的作用是提供一种验证用户的可靠方法。

keygen标签规定用于表单的密钥对生成器字段。

当提交表单时,会生成两个键,一个是私钥,一个公钥。

私钥(private key)存储于客户端,公钥(public key)则被发送到服务器。公钥可用于之后验证用户的客户端证书(client certificate)。

 演示代码:

<form action="" method="get">
用户名: <input type="text" name="usr_name">
加密: <keygen name="security">
<input type="submit">
</form>

  效果:

 output

output元素用于不同类型的输出,比如计算或脚本输出,Edge 12及更早 IE 版本的浏览器不支持 output 元素。

  演示代码:

 <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
      0 <input type="range" id="a" value="50" />100 +<input
        type="number"
        id="b"
        value="50"
      />
      =<output name="x" for="a b"></output>
    </form>

 效果:

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

OSPF的原理与配置

第1章 OSPF[1] 本章阐述了OSPF协议的特征、术语&#xff0c;OSPF的路由器类型、网络类型、区域类型、LSA类型&#xff0c;OSPF报文的具体内容及作用&#xff0c;描述了OSPF的邻居关系&#xff0c;通过实例让读者掌握OSPF在各种场景中的配置。 本章包含以下内容&#xff1a; …

docker创建nginx容器

前言&#xff1a;当直接run运行nginx容器时&#xff0c;如果命令带有-v 映射出配置文件目录&#xff0c;则会报错&#xff0c;提示无法初始化&#xff0c;原因是没有配置文件&#xff0c;docker会同步主机文件到容器内&#xff0c;而主机文件又是空白的&#xff0c;所以无法启动…

选择工业交换机的外壳有什么要求?

在选择工业交换机时&#xff0c;我们通常更加注意工业交换机的温度范围、EMC电磁兼容性、安装方式和电源等方面&#xff0c;而对于工业交换机的外壳关注较少&#xff0c;除非客户有防水要求&#xff0c;那么&#xff0c;选择外壳有什么要求呢&#xff1f; 工业交换机的外壳采用…

华测监测预警系统 2.2 存在任意文件读取漏洞

华测监测预警系统 2.2 存在任意文件读取漏洞 一、 华测监测预警系统 2.2 简介二、漏洞描述三、影响版本四、fofa查询语句五、漏洞复现1、手动复现2、自动复现 六、修复建议 免责声明&#xff1a;请勿利用文章内的相关技术从事非法测试&#xff0c;由于传播、利用此文所提供的信…

mac 版hadoop3.2.4 解决 Unable to load native-hadoop library 缺失文件

mac 版hadoop3.2.4或其他版本 Unable to load native-hadoop library 缺失文件 Native 包报错缺失&#xff1a; 1. hadoop-3.2.4/lib/native里加*.dylib 2. hadoop-3.2.4/etc/hadoop/hadoop-env.sh 加或修改 export HADOOP_OPTS"-Djava.library.path/Users/lvan/Documen…

a16z公布AI产品流量排名,ChatGPT占据榜首

&#x1f989; AI新闻 &#x1f680; a16z公布AI产品流量排名&#xff0c;ChatGPT占据榜首 摘要&#xff1a;美国风投公司a16z公布了针对C端用户的AI产品流量排名榜单。根据SimilarWeb的网站流量数据&#xff0c;ChatGPT位居榜首&#xff0c;占总流量的60%。排名第二的是Char…

设计模式 - 结构型模式考点篇:装饰者模式(概念 | 案例实现 | 优缺点 | 使用场景)

目录 一、结构型模式 1.1、装饰者模式 1.1.1、概念 1.1.2、案例实现 1.1.3、优缺点 1.1.4、使用场景 一、结构型模式 1.1、装饰者模式 1.1.1、概念 装饰者模式就是指在不改变现有对象结构的情况下&#xff0c;动态的给该对象增加一些职责&#xff08;增加额外功能&#…

IsaacGym四足机器人sim to real全过程详细解析(walk these ways方法)

四足机器人强化学习控制第三篇 第一篇 Isaac Gym环境安装和四足机器人模型的训练 第二篇 docker中安装ROS 在宇树四足机器人运行 强化学习GenLoco算法 目录 四足机器人强化学习控制第三篇前言一、安装和配置二、训练1.训练2.恢复训练3.训练结果 三、sim to real1.部署模型注意…

重生奇迹MU天空之城玩转攻略

现在依然有众多玩家喜欢重生奇迹MU 游戏&#xff0c;游戏设计非常完善&#xff0c;后续推出了重生奇迹MU 版本&#xff0c;在设计方面更加炫酷&#xff0c;各种游戏玩法以及模式&#xff0c;让众多玩家感受到不错的游戏体验。 游戏由很多的地图组成&#xff0c;重生奇迹MU 大陆…

【Redis】List列表相关的命令

目录 命令LPUSHLPUSHXLRANGERPUSHRPUSHXLPOPRPOPLINDEXLINSERTLLENblpop和brpop 命令 LPUSH 将⼀个或者多个元素从左侧放⼊&#xff08;头插&#xff09;到list中。 LPUSH key element [element ...]LPUSHX 在key存在时&#xff0c;将⼀个或者多个元素从左侧放⼊&#xff08…

【好文推荐】openGauss索引推荐功能测试

一、单索引推荐 单索引推荐功能&#xff0c;目前支持select查询&#xff0c;看官方介绍类似oracle中的sql_tunning_adviser,不过只是推荐创建索引。根据sql优化原理&#xff0c;猜测应该时根据选择来推荐索引。 1、查看sqlPanWeiDB# create table t2 as select * from pg_tab…

家政预约服务APP小程序搭建,功能支持定制

家政预约服务APP小程序搭建&#xff0c;功能支持定制&#xff0c;后期升级无忧&#xff0e;团队自主研发家政APP系统&#xff0c;正版源码&#xff0c;售后技术保障&#xff01; 家政系统客户端 搭建专属私城流量平台&#xff0c;让您插上互联网的翅膀。找月嫂&#xff0c;育婴…

Docker镜像容器简单案例

我们安装完Docker之后就可以练习了. 镜像 案例1-拉取、查看镜像 1&#xff09;首先去镜像仓库搜索nginx镜像&#xff0c;比如 : Docker Hub Container Image Library | App Containerization 搜索我们想要拉取的镜像 , 例如: nginx 复制命令&#xff1a; docker pull nginx …

性能测试之稳定性测试和并发压力测试的TPS计算

1、稳定性测试TPS计算 ①普通计算公式&#xff1a;TPS总请求数 / 总时间按照需求得到基础数据&#xff0c;在去年第20周&#xff0c;某平台有5万的浏览量那么总请求数我们可以估算为5万&#xff08;1次浏览都至少对应1个请求&#xff09;总请求数 50000请求数总时间&#xff1…

Spring Task简单说明

1.导入坐标 说明&#xff1a;自带有spring-context。 <dependency><groupId>com.aliyun.oss</groupId><artifactId>aliyun-sdk-oss</artifactId><version>${aliyun.sdk.oss}</version> </dependency> 2. 启动类添加注解 pac…

ubuntu下查看realsense摄像头查看支持的分辨率和频率

引言&#xff1a; 在实际应用中&#xff0c;摄像头的频率如果过高&#xff0c;可能会造成系统图像处理的压力过大&#xff0c;因此需要选择合适的参数才能达到预期的效果。本文主要探讨设置realsense相关参数 1、打开终端&#xff0c;输入rs-enumerate-devices rs-enumerate-…

超市微信小程序是怎么做的

市微信小程序是利用微信小程序平台为超市或零售商提供线上销售服务的一种应用。通过小程序&#xff0c;超市可以向消费者提供更加便捷、快速、个性化的购物体验&#xff0c;从而提升销售业绩、增加客户满意度。以下是超市微信小程序可以实现的一些主要功能。 一、商品展示与搜索…

现货黄金指标之王是什么

很多现货黄金投资在日常看盘的交易的时候&#xff0c;都会借助各种各样的技术指标来辅助自己的分析&#xff0c;但其实好用的技术指标两三个就足够了。如果有那么一个指标&#xff0c;可以帮助投资者辨清趋势&#xff0c;把握行情走势的大局&#xff0c;一定会是大受市场欢迎。…

spring 事务源码阅读之实现原理

开启事务 使用EnableTransactionManagement注解开启事务 该注解会引入TransactionManagementConfigurationSelector类&#xff0c;然后该类导入两个类AutoProxyRegistrar和ProxyTransactionManagementConfiguration。 1、添加bean后置处理器 AutoProxyRegistrar类的作用是注…

数字IC前端学习笔记:数字乘法器的优化设计(基2布斯乘法器)

相关阅读 数字IC前端https://blog.csdn.net/weixin_45791458/category_12173698.html?spm1001.2014.3001.5482 ​​​​​​​在之前的文章中&#xff0c;进位保留乘法器、华莱士树乘法器、dadda树乘法器等方法都是优化了部分积累加这个过程。还有一些​​​​​​​方法能对…