HTML5新增常用的表单元素有哪些？附使用实例
本章介绍以下新的表单元素：datalist；keygen；output
datalist 元素：
datalist 元素规定输入域的选项列表。
列表是通过 datalist 内的 option 元素创建的。
如需把 datalist 绑定到输入域，请用输入域的 list 属性引用 datalist 的 id：
Webpage: <input type="url" list="url_list" name="link" /> <datalist id="url_list"> <option label="教程集" value="http://www.php.cn" /> <option label="Google" value="http://www.google.com" /> <option label="Microsoft" value="http://www.microsoft.com" /> </datalist>
提示：option 元素永远都要设置 value 属性。
keygen 元素：
keygen 元素的作用是提供一种验证用户的可靠方法。
keygen 元素是密钥对生成器（key-pair generator）。当提交表单时，会生成两个键，一个是私钥，一个公钥。
私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。
目前，浏览器对此元素的糟糕的支持度不足以使其成为一种有用的安全标准。
<form action="demo_form.asp" method="get"> Username: <input type="text" name="usr_name" /> Encryption: <keygen name="security" /> <input type="submit" /> </form>
output 元素：
output 元素用于不同类型的输出，比如计算或脚本输出：
<output id="result" onforminput="resCalc()"></output>
Input 类型：
HTML5拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。
1.Input 类型- email
email 类型用于应该包含e-mail 地址的输入域。在提交表单时，会自动验证email 域的值。
2.Input 类型- url
url 类型用于应该包含URL 地址的输入域。在提交表单时，会自动验证url 域的值。
3.Input 类型- number
number 类型用于应该包含数值的输入域。您还能够设定对所接受的数字的限定：
4.Input 类型- range
range 类型用于应该包含一定范围内数字值的输入域。
range 类型显示为滑动条。
您还能够设定对所接受的数字的限定：
5.Input 类型- Date Pickers（数据检出器）
HTML5 拥有多个可供选取日期和时间的新输入类型：
date - 选取日、月、年
month - 选取月、年
week - 选取周和年
time - 选取时间（小时和分钟）
datetime - 选取时间、日、月、年（UTC 时间）
datetime-local - 选取时间、日、月、年（本地时间）
6.Input 类型- search
search 类型用于搜索域，比如站点搜索或Google 搜索。
search 域显示为常规的文本域。
<知识点>
<form>定义供用户输入的表单
<input>定义输入域
<textarea>定义文本域（一个多行的输入控件）
<label>定义一个控制的标签
<fieidset>定义域
<legend>定义域的标题
<select>定义一个选择列表
<optgroup>定义选项组
<option>定义下拉列表中的选项
<button>定义一个按钮
【相关文章】
HTML和HTML5的发展历史
html的基础元素，让你零基础学习HTML
以上就是HTML5新增常用的表单元素有哪些？附使用实例的详细内容，更多请关注教程集其它相关文章！
-->您可能感兴趣的文章：
HTML5新增常用的表单元素有哪些？附使用实例
HTML5 input number是什么？HTML5 input type的详细介绍（内附属性图）
html5新增结构：html主体结构和非主体结构的介绍
html5的新特性有哪些？html5新特性的总结
html5 header标签是什么意思？html5 header标签的用法详解（附实例）
html5 details标签的作用是什么？<details>标签的使用方法介绍(附使用实例)
html5 header标签怎么用？html5 header标签的作用介绍
html5新增标签有哪些？html5新增的标签应用
HTML5<datalist>标签有哪些属性？HTML5<datalist>标签的具体用法（附实例）
HTML5中的aside标签怎么用？HTML5aside侧边栏的具体使用方法你知道吗？