购物车
登录 / 注册
微信扫码登陆

推荐手册

HTML5 表单元素

HTML5 表单元素
HTML5 的新的表单元素有:datalist元素、keygen元素、output元素
清浅清浅更新时间:2019-01-17 10:57:25

HTML5表单元素

HTML5 的新的表单元素:

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

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

  • datalist

  • keygen

  • output

浏览器支持

表单元素                                              
datalist             No            No            9.5            No         No   
keygen           No           No           10.5           3.0         No   
output           No            No             9.5            No         No  

datalist 元素

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

列表是通过 datalist 内的 option 元素创建的

如需把 datalist 绑定到输入域,请用输入域的 list 属性引用 datalist 的 id

实例

<form action="#" method="get">
Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
	<option label="0133技术站" value="http://0133.cn/" />
	<option label="php中文网" value="http://php.cn" />
	<option label="百度" value="http://www.baidu.com" />
</datalist>
<input type="submit" />
</form>

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

注意:option 元素永远都要设置 value 属性

keygen 元素

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

keygen 元素是密钥对生成器(key-pair generator)。当提交表单时,会生成两个键,一个是私钥,一个公钥。

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

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

实例

<!DOCTYPE HTML>
<html>
<body>
<form action="/example/html5/demo_form.asp" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

output 元素

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

实例:实现简易计算器

<!DOCTYPE HTML>
<html>
<head>
<form oninput="c.value=parseInt(a.value)+parseInt(b.value)">
<input type="text" name="加数" id="a">+
<input type="text" name="被加数" id="b">=
<output name="c" for="a b"></output>
</form>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

 效果图:

Image 45.jpg           

网站导航
标签地图
学习路径
视频教程
开发软件
旗下子站
php中文网
phpstudy
技术文章
文档工具
关于我们
企业合作
人才招聘
联系我们
讲师招募
QQ交流群
QQ官方交流群
微信公众号
微信公众号