HTML5新增表单控件类型-软考在线

HTML5新增表单控件类型


知识路径： > 电子商务系统程序设计基础 > Web 设计基础 > HTML5标记语言 > HTML5标记语言 > 创建表单 >
相关知识点：3个

HTML5大幅改进了标签的控件，不同控件的表单元素所附加的功能也不相同。到目前为止，对HTML5新增表单控件支持最多、最全面的浏览器是Opera浏览器。对于不支持新增表单类型的浏览器来说，会默认识别为text控件，即显示为普通文本。

下面分别介绍新增的表单控件的使用语法。

（1）输入地址定义的文本框url。

基本语法：

语法说明：在表单中插入url地址定义的文本框，只要将标签中type属性值设为url。在验证输入文本的格时，如果该文本框中的内容不符合url地址的格式，会提示验证错误。

（2）插入地址定义文本框email。

基本语法：

语法说明：在表单中插入email，只要将标签中type属性值设为email就可以插入E-mail地址定义的文本框。在验证输入文本的格式时，如果该文本框中的内容不符合E-mail地址的格式，会提示验证错误。email的元素还有一个multiple属性，表示在该文本框中可输入隔开的多个邮件地址。

（3）插入范围选择器range。

基本语法：

语法说明：在表单中插入range，只要将标签中type属性值设为range就可以插入数值选择器滑动条，表明为某一特定范围内的数值选择器。它还具有min和max属性，表示选择范围的最小值（默认为0）和最大值（默认为100）；还有step属性，表示拖动步长（默认为1）。

（4）插入数字文本框number。

基本语法：

语法说明：在表单中插入专门为输入特定的数字而定义的文本框，标签中type属性值设为number。与range控件类似，都具有min、max和step属性，表示允许范围的最小值、最大值和调整步长。

（5）插入电话文本框tel。

基本语法：

语法说明：在表单中插入电话文本框，只要将标签中type属性值设为tel就可以插入专门为输入电话号码而定义的文本框。

（6）插入搜索文本框search。

基本语法：

语法说明：在表单中只要将标签中type属性值设为search就可以插入专门为输入搜索引擎关键词定义的文本框。

（7）插入颜色选择器color。

基本语法：

语法说明：在表单中只要将标签中type属性值设为color就可以插入颜色选择器，可以看到颜色表单元素的效果。

（8）插入时间有关的选择器date/month/week/time/datetime-local。

基本语法：

语法说明：在表单中只要将标签中type属性值设为相应的选择器就可以显示相应的控件。其中，date会提供日期选择器；month会提供月选择器；week会提供周选择器；time会提供时间选择器；datetime会提供完整的日期和时间（包含时区）的选择器。

旗下网站群

本网站所有产品设计（包括造型，颜色，图案，观感，文字，产品，内容），功能及其展示形式，均已受版权或产权保护。
任何公司及个人不得以任何方式复制部分或全部，违者将依法追究责任，特此声明。
本站部分内容来自互联网或由会员上传，版权归原作者所有。如有问题，请及时联系我们。

工作时间：9:00-20:00

客服

商务合作

客服邮箱service@rkpass.cn