HTML5表单_表单元素
2016-04-15 07:43
543 查看
HTML5的新表单元素
HTML5 拥有若干涉及表单的元素和属性。datalist
keygen
output
浏览器支持
Input type | IE | Firefox | Opera | Chrome | Safari |
---|---|---|---|---|---|
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 绑定到输入域,请用输入域的 list 属性引用 datalist 的 id:
<!DOCTYPE HTML> <html> <body> <form action="/example/html5/demo_form.asp" method="get"> Webpage: <input type="url" list="url_list" name="link" /> <!-- 绑定datalist元素 --> <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> <input type="submit" /> </form> </body> </html>
提示: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> <script type="text/javascript"> function resCalc() { numA=document.getElementById("num_a").value; numB=document.getElementById("num_b").value; document.getElementById("result").value=Number(numA)+Number(numB); } </script> </head> <body> <p>使用 output 元素的简易计算器:</p> <form onsubmit="return false"> <input id="num_a" /> + <input id="num_b" /> = <output id="result" onforminput="resCalc()"></output> </form> </body> </html>
更多请参考:W3School
相关文章推荐
- Android java 与 javascript互访(相互调用)的方法例子
- HTML5中在客户端验证文件上传的大小
- html5 web数据存储
- 页面元素查找之Selectors API
- Canvas 在高清屏下绘制图片变模糊的解决方法
- 原生js结合html5制作小飞龙的简易跳球
- C#实现DataList里面嵌套DataList的折叠菜单
- HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
- 三个不常见的 HTML5 实用新特性简介
- 低版本IE正常运行HTML5+CSS3网站的3种解决方案
- js+HTML5实现canvas多种颜色渐变效果的方法
- javascript+HTML5的Canvas实现Lab单车动画效果
- javascript+html5实现绘制圆环的方法
- javascript html5实现表单验证
- HTML5实现微信拍摄上传照片功能
- JavaScript+html5 canvas制作的百花齐放效果完整实例
- jQuery+HTML5加入购物车代码分享
- jQuery mobile 移动web(6)
- 基于Jquery和html5的7款个性化地图插件