本文摘自PHP中文网,作者零下一度,侵删。
这一篇介绍html5新增的表单元素和表单属性。首先先说一个html5中表单新增的一个功能,在我们之前的html中,表单元素必须放在form元素所包含的里面,在html5中,可以把他们写在页面上的任何一个地方,然后给该元素增加一个form属性,form属性的值为form表单的id,如下:
1 2 3 4 5 6 7 | [html] view plain copy
<form method= "get" id= "test" >
<input type= "text" name= "name" />
<input type= "password" name= "password" />
<input type= "submit" value= "提交" >
</form>
<input type= "text" name= "confirm" form= "test" >
|
在form元素里面的表单元素可以不用添加form属性,如果你想利用form获取所有表单元素的值,那么在form元素外面的表单元素就必须添加form属性,input、select、textarea等元素都满足该功能。
HTML5 有以下新的表单元素:
?<datalist>
?<keygen>
?<output>
注意:不是所有的浏览器都支持HTML5 新的表单元素,但是你可以在使用它们,即使浏览器不支持表单属性,仍然可以显示为常规的表单元素。
HTML5 <datalist> 元素
<datalist> 元素规定输入域的选项列表。
<datalist> 属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时,浏览器应该在该域中显示填写的选项:
使用 <input> 元素的列表属性与 <datalist> 元素绑定.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!DOCTYPE html>
<html>
<body>
<form action= "demo-form.php" method= "get" >
<input list= "browsers" name= "browser" >
<datalist id= "browsers" >
<option value= "Internet Explorer" >
<option value= "Firefox" >
<option value= "Chrome" >
<option value= "Opera" >
<option value= "Safari" >
</datalist>
<input type= "submit" >
</form>
<p><strong>注意:</strong> Internet Explorer 9(更早IE版本),Safari不支持 datalist 标签。</p>
</body>
</html>
|
![](http://ypimg.muzhuangnet.com/Collect/csharp/upload/article/000/001/506/c3d07126410698f9fa3259db24a8ecaf-0.jpg)
HTML5 <keygen> 元素
<keygen> 元素的作用是提供一种验证用户的可靠方法。
<keygen>标签规定用于表单的密钥对生成器字段。
当提交表单时,会生成两个键,一个是私钥,一个公钥。
私钥(private key)存储于客户端,公钥(public key)则被发送到服务器。公钥可用于之后验证用户的客户端证书(client certificate)。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html>
<html>
<body>
<form action= "demo_keygen.php" method= "get" >
用户名: <input type= "text" name= "usr_name" >
加密: <keygen name= "security" >
<input type= "submit" >
</form>
<p><strong>注意:</strong> Internet Explorer 不支持 keygen 标签。</p>
</body>
</html>
|
![](http://ypimg.muzhuangnet.com/Collect/csharp/upload/article/000/001/506/c3ea6a7493101f5ea5ca7ed8f9f95655-1.jpg)
HTML5 <output> 元素
<output> 元素用于不同类型的输出,比如计算或脚本输出:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html>
<html>
<body>
<form oninput= "x.value=parseInt(a.value)+parseInt(b.value)" >0
<input type= "range" id= "a" value= "50" >100
+<input type= "number" id= "b" value= "50" >
=<output name= "x" for = "a b" ></output>
</form>
<p><strong>注意:</strong> Internet Explorer 不支持 output 标签。</p>
</body>
</html>
|
![](http://ypimg.muzhuangnet.com/Collect/csharp/upload/article/000/001/506/c3ea6a7493101f5ea5ca7ed8f9f95655-2.jpg)
HTML5 新表单元素
![](http://ypimg.muzhuangnet.com/Collect/csharp/upload/article/000/001/506/c3ea6a7493101f5ea5ca7ed8f9f95655-3.jpg)
以上就是HTML5新表单元素的图文实例的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
详细介绍HTML5实现3d迷宫的代码案例
HTML5中web是什么?web存储中的元素有哪些?
h5的视频播放库video.js详解
分享HTML5制作banner的实例
h5之scrollintoview用法详解
HTML5web 存储实例详解
如何使用HTML5 canvas绘制线条
HTML5plus移动应用的开发实例分享
web sql数据库的使用教程
HTML5 高级教程之web storage
更多相关阅读请进入《HTML5》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » HTML5新表单元素的图文实例