HTML5 的新的表单元素(datalist/keygen/output)使用介绍

2016-02-19 10:39 72 1 收藏

下面图老师小编跟大家分享一个简单易学的HTML5 的新的表单元素(datalist/keygen/output)使用介绍教程,get新技能是需要行动的,喜欢的朋友赶紧收藏起来学习下吧!

【 tulaoshi.com - Web开发 】

HTML5 拥有若干涉及表单的元素和属性。

本章介绍以下新的表单元素:

•datalist
•keygen
•output

浏览器支持

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/) Input typeIEFirefoxOperaChromeSafari datalistNoNo9.5NoNo keygenNoNo10.53.0No outputNoNo9.5NoNo
datalist 元素

datalist 元素规定输入域的选项列表。
列表是通过 datalist 内的 option 元素创建的。
如需把 datalist 绑定到输入域,请用输入域的 list 属性引用 datalist 的 id:

实例

代码如下:

Webpage: input type="url" list="url_list" name="link" /
datalist id="url_list"
option label="W3School" value="http://www.W3School.com.cn" /
option label="Google" value="http://www.google.com" /
option label="Microsoft" value="http://www.microsoft.com" /
/datalist

亲自试一试

提示:option 元素永远都要设置 value 属性。

keygen 元素

keygen 元素的作用是提供一种验证用户的可靠方法。
keygen 元素是密钥对生成器(key-pair generator)。当提交表单时,会生成两个键,一个是私钥,一个公钥。

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

目前,浏览器对此元素的糟糕的支持度不足以使其成为一种有用的安全标准。
实例

代码如下:

form action="demo_form.asp" method="get"
Username: input type="text" name="usr_name" /
Encryption: keygen name="security" /
input type="submit" /
/form

亲自试一试

output 元素

output 元素用于不同类型的输出,比如计算或脚本输出:
实例

代码如下:

output id="result" onforminput="resCalc()"/output

来源:http://www.tulaoshi.com/n/20160219/1595383.html

延伸阅读
标签: Web开发
  HTML5带出了一系列新元素,并且将在未来被广泛应用。然而,有一些元素在使用时易被混淆,包括以下两个新元素:article和section。 最常被问起的问题是:在什么情况下我们应该使用这些元素?以及我们应该如何正确的使用这些元素? Section元素 这 是一个最容易产生歧义的元素。它与div元素有什么区别?我们一直在用div来划分段落,...
标签: Web开发
谷歌的网站是时逛时新啊,今天在他们首页发现了HTML5的新玩法语音搜索。可惜的是只有webkit核心的浏览器才能使用。用法很简单 只需要在input添加属性x-webkit-speech即可,例子如下: 代码如下: input type="text" x-webkit-speech / 这样你的输入框右边里就多了个「小话筒」,点击的时候就会提示 这时说出来识别后就可以了,我测试...
标签: Web开发
内容概要:本文通过简单的代码实例,以及略猥琐的图片demo,展示了canvas在图像像素数据操作方面的常用接口。至于如何利用这几个接口实现更复杂的效果,则会在后续章节里继续讲述。 一、canvas图片填充; 2、设置/获取canvas图片数据; 3、创建canvas图片数据;4、关于imageData.data的一点补充; 5、写在后面 一、canvas图片填充 代码如...
  在设计HTML页面的过程中经常会遇到表单元素覆盖样式元素引起的问题,图一就是一个典型的例子。不要小看这个貌似“低级”的问题,即使一些规模较大的网站上类似的问题也绝不鲜见。本文探讨了造成这一问题的根本原因,并提出一种补救办法——之所以说补救办法而不是一劳永逸的解决办法,是因为微软和NetScape这两个巨头也还没有对策。 ...
标签: Web开发
最近正在学习html5,刚接触html5,感觉有点不适应,因为有一些标签改变了,特别是div, section article这三个标签,查了一些资料,也试着用html5和css3布局网页,稍微有点头绪了,下边还有一个我刚刚布局好的一个简单的网页,供大家参考,先看一下,最起码心里对html5的结构有些概念。 div HTML Spec: The div element has no special me...

经验教程

462

收藏

82
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部