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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了HTML5新增常用的表单元素有哪些？附使用实例，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2581字，纯文字阅读大概需要4分钟。

内容图文

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="Gxl网" value="http://www.gxlcms.com" />
<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新增常用的表单元素有哪些？附使用实例的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的HTML5新增常用的表单元素有哪些？附使用实例全部内容，希望文章能够帮你解决HTML5新增常用的表单元素有哪些？附使用实例所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---