HTML5新增常用的表单元素有哪些？附使用实例

HTML5现在越来越火了，很多人都想学习HTML5，但是HTML5比旧版的多了些新的表单元素，现在就让我们来看看新增的都有哪些表单元素吧。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="php中文网" 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 域显示为常规的文本域。

16af92afd8c97b30ffbcda2e1ce36f1e

ff9c23ada1bcecdd1a0fb5d5a0f18437定义供用户输入的表单

d5fd7aea971a85678ba271703566ebfd定义输入域

4750256ae76b6b9d804861d8f69e79d3定义文本域（一个多行的输入控件）

2e1cf0710519d5598b1f0f14c36ba674定义一个控制的标签

02609e582fd7962059acb31154de1a92定义域

e911751791aa3ba95dc724e2fb905976定义域的标题

221f08282418e2996498697df914ce4e定义一个选择列表

5b7a15bed8615d1b843806256bebea72定义选项组

5a07473c87748fb1bf73f23d45547ab8定义下拉列表中的选项

bb9345e55eb71822850ff156dfde57c8定义一个按钮

【相关文章】

HTML和HTML5的发展历史

html的基础元素，让你零基础学习HTML

以上是HTML5新增常用的表单元素有哪些？附使用实例的详细内容。更多信息请关注PHP中文网其他相关文章！