本文摘自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>
|
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>
|
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>
|
HTML5 新表单元素
以上就是HTML5新表单元素的图文实例的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
h5里的postmessage api图文详解 详细介绍
巧用HTML5给按钮背景设计不同的动画
HTML5怎么嵌入视频
htnl5利用svg页面高斯模糊的方法
HTML5 mark标签是什么意思?HTML5 mark标签的作用又是什么?
h5可以用来干什么?
HTML5拖拽功能实现的拼图游戏
HTML5新增加的标签有哪些
介绍一个用HTML5 canvas 制作的时钟
HTML5实现对话气泡点击动画
更多相关阅读请进入《HTML5》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » HTML5新表单元素的图文实例