第7课 HTML5 HTML5 的新的表单元素 - html教程,html5教程,html知识积累 - CSS模版园-免费网站模版下载
当前位置 CSS模版园 >> 网站制作 >> html >> 第7课 HTML5 HTML5 的新的表单元素

第7课 HTML5 HTML5 的新的表单元素

HTML5 的新的表单元素:

HTML5 拥有若干涉及表单的元素和属性。

本章介绍以下新的表单元素:

  • datalist

  • keygen

  • output


浏览器支持

Input type IE Firefox Opera Chrome Safari
datalist IE10+ √
keygen
output

datalist 元素

<datalist> 标签规定了 <input> 元素可能的选项列表。

<datalist> 标签被用来在为 <input> 元素提供"自动完成"的特性。用户能看到一个下拉列表,里边的选项是预先定义好的,将作为用户的输入数据。

请使用 <input> 元素的 list 属性来绑定 <datalist> 元素。

<input list="browsers" name="browser">
<datalist id="browsers">
    <option value="Internet Explorer" label="IE">
    <option value="Firefox">fox</option>
    <option value="Chrome">chrome</option>
    <option value="Opera">opera</option>
    <option value="Safari" label="safari">
</datalist>

keygen 元素

keygen 元素的作用是提供一种验证用户的可靠方法。

keygen 元素是密钥对生成器(key-pair generator)。当提交表单时,会生成两个键,一个是私钥,一个公钥。

私钥(private key)存储于客户端,公钥(public key)则被发送到服务器。公钥可用于之后验证用户的客户端证书(client certificate)。

目前,浏览器对此元素的糟糕的支持度不足以使其成为一种有用的安全标准。

<form method="get">
    Username: <input type="text" name="usr_name" />
    Encryption: <keygen name="security" />
</form>

output 元素

output 元素用于不同类型的输出,比如计算或脚本输出:

<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>

声明本站所有资源仅供学习与参考,请勿用于商业用途。转载请注明来自:cssteach.com

原文http://cssteach.com/html/show-9-72.html

若文章内容有错误或无法下载,请在回复中说明(可无需登录,直接评论)

最新文章

图文

热门网站模版