- 0133技术站
- 联系QQ：18840023
- QQ交流群
- 微信公众号
清浅更新时间：2019-01-17 10:57:25HTML5表单元素
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>
点击 "运行实例" 按钮查看在线实例
效果图：
推荐手册