深入探索HTML5表单技术

荣艳冬

摘要：到目前为止，网页制作遵从的规范大部分是HTML4，这个规范的表单过于简陋，文中首先分析了HTML4中表单存在代码量大、开发困难等问题，然后详细阐述了HTML5表单技术对于表单类型和属性的扩充，最后深入分析了HTML5表单技术在当前网页制作和前端开发领域中的优势。

关键词：HTML5；表单；验证

中图分类号：TP393 文献标识码：A 文章编号：1009-3044（2015）15-0215-02

表单是网页中收集用户数据的主要手段，随着互联技术高速发展，尤其是基于B/S架构的软件对于表单的需求非常高，这个领域被称为前端开发，也就是网页GUI（图形用户界面），GUI设计要遵循易用、高效、美观、灵活、一致等原则。

HTML5是Web技术的一项巨大飞跃，它吸收了网页的各种技术需求，将很多API列入规范之中，将图形图像、视频音频等媒体进行标准化。其中，表单技术有了明显的提升，无论是表单的类型，还是表单的属性都使得表单的功能更加丰富，操作更加简洁，减少了代码编写，提高工作效率。

1 HTML4的表单技术

HTML4中的表单技术相当简单，可以进行数据收集的表单域的数量不超过十个，这是使得利用网页制作数据录入界面非常困难，具体存在的问题有以下几个方面：

1）表单种类和属性单一，无法满足用户需求；

2）表单自身没有验证功能，需要用户通过编写脚本语言实现验证，增加了表单验证的难度，降低了页面的执行效率；

3）表单实现效果很差，虽然可以通过CSS进行样式修改，但这还不足以满足用户需求，例如：下拉菜单在IE浏览器中无法通过CSS进行样式的修改，很多用户为了追求效果，需要自己开发下拉菜单。

基于以上的原因，用户制作基于网页GUI时，通常要使用Javascript语言和CSS技术整合控件满足用户需求，这大大增加了开发的难度，提高了开发成本，降低了开发效率。

2 HTML5表单技术

HTML5除了扩充了表单类型，还给表单增加了很多新的属性，使表单功能和数据验证的实现尽量从程序代码分离出来。

2.1 HTML5新增表单

HTML5在HTML4的基础之上扩充了表单的类型，这些表单更加符合当前网页界面制作的需要，它不仅保持了简洁易用的特性，还内置了验证功能，HTML5增加的表单如表1所示。其中“email”、“url”、“search”、“tel”表单在“text”表单基础上内置了验证功能，如果录入数据错误，会提示错误，并且无法完成数据提交；“date”、“number”、“range”和“color”表单封装了特有的功能，用户可以更加方便的进行日期选择、颜色选择等操作。

2.2 HTML5表单属性

HTML5除了扩充了表单类型，还给表单增加了很多新的属性，这些属性可以被分为以下几类：

1）表单域所属

新增的“form”属性可以将当前表单域指定给一个或多个表单，这使得表单域的归属和页面位置更加灵活，无需像HTML4一样必须将表单域放置在表单内部。另外，HTML5提供了“formAction”、“formMethod”等属性，这些属性设定后可以覆盖表单的action、method等属性，使表单域的使用更加灵活。

2）验证属性

HTML5除了内置验证功能外，还提供了专门的验证属性：“required”属性具备非空验证功能，表单必须输入数据才可以通过验证；“pattern”属性的值是正则表达式，表单内容如果不符合正则表达式规则将无法通过验证，通过“required”和“pattern”属性使表单的验证功能非常完善，用户几乎无需编写任何验证代码就可以实现复杂的表单验证功能。

3）功能属性

网页技术不断成熟，很多网页中表单功能已经成为一种使用习惯，HTML5将常用的表单功能进行了规范：在页面加载时，“autofocus”属性可以让输入性表单自动的获取焦点，它取代了Javascript语言的focus方法；“Placeholder”属性提供输入性表单提示功能，在表单为空时提示信息会显示，如果表单获得焦点，提示内容自动消失；“auotcomplete”属性可以设定输入性表单自动完成功能。

4）数据列表功能

HTML4中有下拉菜单和列表，但是文本和列表进行组合的表单一直实现困难，“list”属性允许将已经定义好的数据列表指定给某一个文本，从而解决组合框的问题。

2.3 表单的优势分析

HTML5对表单输入的类型和属性都进行扩充，它存在的优势主要有以下几方面：

1）表单继承了原来表单简洁的特点。

2）输入表单功能扩充，以及验证功能的完善，用户无需将精力集中到功能性表单的实现和验证的实现，更加注重页面的设计，提高开发效率。

3）输入表单和验证功能无需再使用程序实现，这大量减少前端Javascript代码量，提高了网页运行效率。

4）丰富的表单属性保持了表单的一致性，增加了表单的灵活性。

3 结束语

表单作为网页和用户的数据接口，其作用非常重要，HTML5提供了更加符合当前技术需求的表单技术，无论从GUI设计需求来讲，还是从运行效率来讲，HTML5都提出了相对合理的解决方案，它更适合移动网页GUI开发，具有更好的跨平台性。

参考文献：

[1] 姜凤燕， 段会川. HTML5新输入类型及其对RIA界面效率支持研究[J]. 计算机技术与发展， 2015，22（5）：137-140.

[2] 沈飞. 基于HTML5的移动教学平台关键技术解析[J]. 淮海工学院学报： 自然科学版， 2014，23（4）： 26-30.

[3] Peter Lubbers，Brian Albers. Pro HTML5 Programming[M]. Apress， 2011.