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

邀月观天象

邀月观天象

2016-02-19 10:39

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

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

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

•datalist
•keygen
•output

浏览器支持

(本文来源于图老师网站,更多请访问https://m.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
展开更多 50%)
分享

猜你喜欢

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

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

HTML5之HTML元素扩展(下)—增强的Form表单元素值得关注

Web开发
HTML5之HTML元素扩展(下)—增强的Form表单元素值得关注

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

HTML5中的新元素介绍

Web开发
HTML5中的新元素介绍

基于HTML5 FileSystem API的使用介绍

Web开发
基于HTML5  FileSystem  API的使用介绍

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

HTML5之HTML元素扩展(上)—新增加的元素及使用概述

Web开发
HTML5之HTML元素扩展(上)—新增加的元素及使用概述

HTML5的表单(绝对特别强大的功能)使用示例

Web开发
HTML5的表单(绝对特别强大的功能)使用示例

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

电池充电只能冲到45%

电池充电只能冲到45%

AJax 学习笔记二(onreadystatechange的作用)

AJax 学习笔记二(onreadystatechange的作用)
下拉加载更多内容 ↓