HTML5新表单元素的图文实例
首先先说一个html5中表单新增的一个功能,在我们之前的html中,表单元素必须放在form元素所包含的里面,在html5中,可以把他们写在页面上的任何一个地方,然后给该元素增加一个form属性,form属性的值为form表单的id,如下:
[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>
元素绑定.
!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)。
!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> 元素用于不同类型的输出,比如计算或脚本输出:
!DOCTYPE html> html> body> form oninput="x.value=parseint(a.value)+parseInt(b.value)"> 0input 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新表单元素的图文实例的详细内容,更多请关注其它相关文章!声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: HTML5新表单元素的图文实例
本文地址: https://pptw.com/jishu/583521.html