点评:HTML5 拥有若干涉及表单的元素和属性,下面为大家介绍下新的表单元素datalist 元素、keygen 元素、output 元素以及它们的使用实例,感兴趣的朋友可以参考下哈,希望对大家有所帮助
HTML5 拥有若干涉及表单的元素和属性。 wtCHTML5中文学习网 - HTML5先行者学习网
wtCHTML5中文学习网 - HTML5先行者学习网
本章介绍以下新的表单元素: wtCHTML5中文学习网 - HTML5先行者学习网
wtCHTML5中文学习网 - HTML5先行者学习网
•datalist wtCHTML5中文学习网 - HTML5先行者学习网
•keygen wtCHTML5中文学习网 - HTML5先行者学习网
•output wtCHTML5中文学习网 - HTML5先行者学习网
wtCHTML5中文学习网 - HTML5先行者学习网
浏览器支持wtCHTML5中文学习网 - HTML5先行者学习网
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 |
wtCHTML5中文学习网 - HTML5先行者学习网datalist 元素 wtCHTML5中文学习网 - HTML5先行者学习网wtCHTML5中文学习网 - HTML5先行者学习网datalist 元素规定输入域的选项列表。
wtCHTML5中文学习网 - HTML5先行者学习网列表是通过 datalist 内的 option 元素创建的。
wtCHTML5中文学习网 - HTML5先行者学习网如需把 datalist 绑定到输入域,请用输入域的 list 属性引用 datalist 的 id:
wtCHTML5中文学习网 - HTML5先行者学习网wtCHTML5中文学习网 - HTML5先行者学习网实例 wtCHTML5中文学习网 - HTML5先行者学习网 wtCHTML5中文学习网 - HTML5先行者学习网
Webpage: <input type="url" list="url_list" name="link" /> wtCHTML5中文学习网 - HTML5先行者学习网
<datalist id="url_list"> wtCHTML5中文学习网 - HTML5先行者学习网
<option label="W3School" value="http://www.W3School.com.cn" /> wtCHTML5中文学习网 - HTML5先行者学习网
<option label="Google" value="http://www.google.com" /> wtCHTML5中文学习网 - HTML5先行者学习网
<option label="Microsoft" value="http://www.microsoft.com" /> wtCHTML5中文学习网 - HTML5先行者学习网
</datalist> wtCHTML5中文学习网 - HTML5先行者学习网
wtCHTML5中文学习网 - HTML5先行者学习网亲自试一试 wtCHTML5中文学习网 - HTML5先行者学习网wtCHTML5中文学习网 - HTML5先行者学习网提示:option 元素永远都要设置 value 属性。
wtCHTML5中文学习网 - HTML5先行者学习网wtCHTML5中文学习网 - HTML5先行者学习网keygen 元素 wtCHTML5中文学习网 - HTML5先行者学习网wtCHTML5中文学习网 - HTML5先行者学习网keygen 元素的作用是提供一种验证用户的可靠方法。
wtCHTML5中文学习网 - HTML5先行者学习网keygen 元素是密钥对生成器(key-pair generator)。当提交表单时,会生成两个键,一个是私钥,一个公钥。
wtCHTML5中文学习网 - HTML5先行者学习网wtCHTML5中文学习网 - HTML5先行者学习网私钥(private key)存储于客户端,公钥(public key)则被发送到服务器。公钥可用于之后验证用户的客户端证书(client certificate)。
wtCHTML5中文学习网 - HTML5先行者学习网wtCHTML5中文学习网 - HTML5先行者学习网目前,浏览器对此元素的糟糕的支持度不足以使其成为一种有用的安全标准。
wtCHTML5中文学习网 - HTML5先行者学习网实例 wtCHTML5中文学习网 - HTML5先行者学习网 wtCHTML5中文学习网 - HTML5先行者学习网
<form action="demo_form.asp" method="get"> wtCHTML5中文学习网 - HTML5先行者学习网
Username: <input type="text" name="usr_name" /> wtCHTML5中文学习网 - HTML5先行者学习网
Encryption: <keygen name="security" /> wtCHTML5中文学习网 - HTML5先行者学习网
<input type="submit" /> wtCHTML5中文学习网 - HTML5先行者学习网
</form> wtCHTML5中文学习网 - HTML5先行者学习网
wtCHTML5中文学习网 - HTML5先行者学习网亲自试一试 wtCHTML5中文学习网 - HTML5先行者学习网wtCHTML5中文学习网 - HTML5先行者学习网output 元素 wtCHTML5中文学习网 - HTML5先行者学习网wtCHTML5中文学习网 - HTML5先行者学习网output 元素用于不同类型的输出,比如计算或脚本输出:
wtCHTML5中文学习网 - HTML5先行者学习网实例 wtCHTML5中文学习网 - HTML5先行者学习网 wtCHTML5中文学习网 - HTML5先行者学习网
<output id="result" onforminput="resCalc()"></output> wtCHTML5中文学习网 - HTML5先行者学习网
wtCHTML5中文学习网 - HTML5先行者学习网