HTML 5 基础教程

HTML是超文本标记语言，是一种专门用来制作网页的语言，而HTML5就是它的第五个版本，2014年10月29日，万维网联盟宣布，经过接近8年的艰苦努力，该标准规范终于制定完成，该标准针对当前互联网的飞速发展制定了更加标准的网页语言规范及适用功能，同时也给我们开发者带来了更多的开发选择，学习它是每个前端开发者必修的课程。

W3CAPI

2020-06-15 06:59:35

文档目录

我的书签

请登录

HTML5 表单新标签元素简介

提到表单我们会马上想到 input和form 标签，HTML中的表单是为了采集用户数据，而设计的一组输入控件；在HTML5中，又新增了多个表单新元素标签，如下列表：

datalist：<input>标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值
keygen：<keygen> 标签规定用于表单的密钥对生成器字段
output：<output> 标签定义不同类型的输出，比如脚本的输出等

HTML5 表单新标签浏览器支持及兼容

不是所有的浏览器都支持HTML5 新的表单元素标签，但是你可以在使用它们，即使浏览器不支持表单属性，仍然可以显示为常规的表单元素。

标签名称	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

HTML5 表单 datalist 标签元素

datalist 标签元素规定输入域input 的选项列表。
列表是通过 datalist 内的 option 元素创建的。
如需把 datalist 绑定到输入域，请用输入域的 list 属性引用 datalist标签的 id值
如下代码功能：给input输入框规定可输入的URL地址为 datalist中规定的三个选项值，这里是可选的列表值，意思是可以输入列表以外的值

<form action="/" method="get">
    网站URL地址: <input type="url" list="url_list" name="link" />
    <datalist id="url_list">
        <option label="w3capi" value="http://www.w3capi.com" />
        <option label="Google" value="http://www.google.com" />
        <option label="Microsoft" value="http://www.microsoft.com" />
    </datalist>
    <input type="submit"  />
</form>

执行一下

HTML5 表单 keygen 标签元素

keygen 元素的作用是提供一种验证用户的可靠方法。
keygen 元素是密钥对生成器（key-pair generator）。当提交表单时，会生成两个键，一个是私钥，一个公钥。
私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于后台服务器程序来验证用户的客户端证书（client certificate）。
目前，浏览器对此元素的支持度不足以使其成为一种有用的安全标准。
<keygen> 标签已经从 Web 标准中删除，我们做一个了解即可。

<form action="/static/example/html5/form.php" method="get">
    用户名： <input type="text" name="usr_name" />
    加密： <keygen name="security"  />
    <input type="submit" />
</form>

执行一下

HTML5 表单 output 标签元素

output 元素用于不同类型的输出，比如计算或脚本输出，其实完全可以使用其他标签来实现此功能，只是HTML5给我们新增此标签可能后期有其他特殊用户，做一下了解即可，代码如下：

<p>使用 output 元素的简易计算器：</p>
<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>

执行一下

作者文档

HTML 5 基础教程

HTML5 表单 新标签元素简介

HTML5 表单新标签 浏览器支持及兼容

HTML5 表单 datalist 标签元素

HTML5 表单 keygen 标签元素

HTML5 表单 output 标签元素

HTML5 表单新标签元素简介

HTML5 表单新标签浏览器支持及兼容