HTML5的新增表单元素

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 +<inputtype="number"id="b"value="50"/>=<output name="x" for="a b"></output></form>

 效果:

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

前端-uniapp-开发指南

美团外卖微信小程序开发 uniapp-美团外卖微信小程序开发P1 成果展示P2外卖小程序后端&#xff0c;学习给小程序写http接口P3 主界面配置P4 首页组件拆分P13 外卖列表布局筛选组件商家 布局测试数据创建样式 请求商家外卖数据封装请求并发请求 uni-app框架调用https接口 开发小程…

FPGA面试题(4)(跨时钟域处理)

跨时钟域处理方法 慢->快快->慢单bit在快时钟域同步打拍&#xff0c;将信号同步到快时钟域展宽后同步打拍多bit异步FIFO异步FIFO握手信号 一.打两拍 适用于单bit跨时钟域处理所谓的打两拍就是定义两级寄存器实现延时 那为什么是打两拍&#xff0c;不是打一拍&#x…

前端性能优化之防抖节流

前端性能优化之防抖&节流 1.什么是防抖和节流2.代码实现2.1 实现防抖2.2 实现节流 3.应用场景3.1 防抖的应用3.2 节流的应用 1.什么是防抖和节流 防抖和节流是前端开发中常用的两种性能优化技术。 为什么需要防抖和节流呢&#xff1f; 两者目的都是为了防止某个时间段内…

使用策略模式重构审批

之前在公司与同时合作开发了一个考核系统&#xff0c;最后干完后整个代码也是合在了我这里&#xff0c;于是进行了codereview&#xff0c;进行优化代码&#xff0c;在审核这边&#xff0c;我先是拆分了公共代码&#xff0c;然后对重复的代码块进行了封装&#xff0c;但是审核这…

面试总结(mysql定精度/oom排查/spring三级缓存/stream流)

Mysql数据类型上的一个把握 1、MySQL Decimal为什么不会丢失精度 DECIMAL的存储方式和其他数据类型都不同&#xff0c;它是以字符串形式存储的。假设一个字段为DECIMAL(3,0)&#xff0c;当我们存入100时&#xff0c;实际上存入的1、0、0这三个字符拼接而成的字符串的二进制值&…

计算机竞赛 题目:基于深度学习的手势识别实现

文章目录 1 前言2 项目背景3 任务描述4 环境搭配5 项目实现5.1 准备数据5.2 构建网络5.3 开始训练5.4 模型评估 6 识别效果7 最后 1 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 基于深度学习的手势识别实现 该项目较为新颖&#xff0c;适合作为竞赛课题…

华为OD机考算法题:字符串划分

题目部分 题目字符串划分难度难题目说明给定一个小写字母组成的字符串s&#xff0c;请找出字符串中两个不同位置的字符作为分割点&#xff0c;使得字符串分成的三个连续子串且子串权重相等&#xff0c;注意子串不包含分割点。 若能找到满足条件的两个分割点&#xff0c;请输出…

c++ qt--线程(二)(第九部分)

c qt–线程&#xff08;二&#xff09;&#xff08;第九部分&#xff09; 一.线程并发 1.并发问题&#xff1a; ​ 多个线程同时操作同一个资源&#xff08;内存空间、文件句柄、网络句柄&#xff09;&#xff0c;可能会导致结果不一致的问题。发生的前提条件一定是多线程下…

MyBatis注解开发实现学生管理页面(分页pagehelper,多条件搜索,查看课程信息)

pom.xml <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://maven.apache.org/POM/4.0.0 …

PowerShell pnpm : 无法加载文件 C:\Users\lenovo\AppData\Roaming\npm\pnpm.ps1

1、右键点击【开始】&#xff0c;打开Windows PowerShell&#xff08;管理员&#xff09; 2、运行命令set-ExecutionPolicy RemoteSigned 3、根据提示&#xff0c;输入A,回车 此时管理员权限已经可以运行pnpm 如果vsCode还报该错误 继续输入 4、右键点击【开始】&#xff0c;打…

澳大利亚教育部宣布ChatGPT将被允许在澳学校使用!

教育部长最近宣布&#xff0c;从 2024 年起&#xff0c;包括 ChatGPT 在内的人工智能将被允许在所有澳大利亚学校使用。 &#xff08;图片来源&#xff1a;卫报&#xff09; 而早些时候&#xff0c;澳洲各高校就已经在寻找与Chatgpt之间的平衡了。 之前&#xff0c;悉尼大学就…

Mac电脑交互式原型设计 Axure RP 8汉化最新 for mac

Axure RP 8是一款专业且快速的原型设计工具&#xff0c;主要用于定义需求、规格、设计功能和界面。这款工具主要适用于用户体验设计师、交互设计师、业务分析师、信息架构师、可用性专家和产品经理等职业。 Axure RP 8的主要特性包括能够快速设计出应用软件或Web网站的线框图、…