打印

文章

该内容已经被标记书签！

标记书签错误，请重试！

使用HTML5构建下一代的Web Form

作者蒋博发布于 2009年6月22日

领域: 架构 & 设计,; 语言 & 开发
主题: Java ,; 架构 ,; 编程 ,; 语言
标签: 标识语言 ,; W3C

分享到

HTML5 是由 WHATWG (Web Hypertext Application Technology Working Group) 发起的，最开始的名称叫做Web Application 1.0，而后这个标准吸纳了Web Forms 2.0的标准，并一同被W3C组织所采用，合并成为下一代的HTML5标准。

前言

HTML语言作为如今编程最为广泛的语言，具有易用、快捷、多浏览平台兼容等特点，但是随着时代的进步，HTML的标准却停滞不前，这一次还在不断开发中的HTML5标准的更新可以说给这门标记语言带来了新的生命力。本文将着重讨论HTML5中的Web Forms 2.0, 即表单的部分。

表单是网页中常见的控件(集)。小到网站注册登录，大到一个企业的数据管理系统，都基本上有表单的身影。表单之所以如此重要，主要是因为它担负大量的用户和网页后台数据更新交互的任务。Web开发人员，对于网页表单可以说又爱又恨，爱的是它方便的收集、组织数据的功能，恨的是它的功能很大程度上也就仅此而已。一些在最终网站用户看起来稀松平常的功能，比如说输入类型检查、表单校验、错误提示等等，开发人员无不需要花费大量精力利用JavaScript和DOM编程来满足这些天然所需的功能点，而随着Ajax的流行，出现的一些JavaScript的工具库，比如Dojo, YUI等都提供了方便的JavaScript Widget或者API来减轻开发人员的负担。

HTML5的表单新特性

HTML5 Web Forms 2.0是对目前Web表单的全面提升，它在保持了简便易用的特性的同时，增加了许多内置的控件或者控件属性来满足用户的需求，并且同时减少了开发人员的编程。在我看来，HTML5 主要在以下几个方面对目前的Web表单做了改进：

新的控件类型
- 还在为类型检查犯愁吗，还在为那一长串看不太明白的检验输入的正则表达式而苦恼吗，HTML5提供的一系列新的控件将天然的具备类型检查的功能。比如说URL输入框，Email输入框等。
```
<input type="url"></input>
<input type="email"></input>
```
- 当然还有非常重要的日期输入框，要知道使用JavaScript和CSS来“手工”制作一个日期输入框还是非常花功夫的，类似Dojo，YUI这样的类库也无不在这个widget上面大做文章。
```
<input type="date"></input>
```
- 作为我痛苦记忆的一部分，我经常记得我们开发人员要为一个select下拉别表动态的添加非常多的选项,这些选项大多数都是来自数据库，比如说国家、省市列表等等。这个事情非常繁琐。HTML5将支持data属性，为select控件外联数据源！
```
<select data="http://domain/getmyoptions"></select>
```
改进的文件上传控件，你可以使用一个控件上传多个文件，自行规定上传文件的类型（accept），你甚至可以设定每个文件最大的大小（maxlength）。你看出它和一般操作系统提供的文件上传控件的区别了吗，反正我觉得基本一致了。在HTML5应用中，文件上传控件将变得非常强大和易用。
重复（repeat）的模型，HTML5提供一套重复机制来帮助我们构建一些重复输入列表，其中包括一些诸如add、remove、move-up，move-down的按钮类型，通过这一套重复的机制，开发人员可以非常方便的实现我们经常看到的编辑列表，这是一个很常见的模式，我们可以增加一个条目、删除某个条目、或者移动某个条目等等。
内建的表单校验系统，HTML5为不同类型的输入控件各自提供了新的属性，来控制这些控件的输入行为，比如我们常见的必填项required属性，以及为数字类型控件提供的max、min等。而在你提交表单的时候，一旦校验错误，浏览器将不执行提交操作，而会显示相应的检验错误信息。
```
<input type="text" required></input>
<input type="number" min=10  max=100></input>
```
XML Submission，我们一般常见的是form的编码格式是application/x-www-form-urlencoded。开发人员都很清楚这种格式，数据送到服务器端，可以方便的存取。HTML5将提供一种新的数据格式：XML Submission，即application/x-www-form+xml。简单的举例说，服务器端将直接接收到XML形式的表单数据。
```
<submission>
    <field name="name" index="0">Peter</field>
    <field name="password" index="0">password</field>
</submission>
```

实例分析

我将利用HTML5新的表单系统, 做一个简单的用户注册的界面，包括用户名，密码，出生日期，保密问题等内容，代码如下：

<! doctype html>
<html>
    <head>
        <style>
            p label {
                width: 180px;
                float: left;
                text-align: right;
                padding-right: 10px
            }
            table {
                margin-left: 80px
            }
            table td {
                border-bottom: 1px solid #CCCCCC
            }
            input.submit {
                margin-left: 80px
            }
        </style>
    </head>
    <body>
        <form action='/register' enctype="application/x-www-form+xml" method="post">
            <p>
                <label for='name'>ID(请使用Email注册)</label>
                <input name='name' required type='email'></input>
            </p>
            <p>
                <label for='password'>密码</label>
                <input name='password' required type='password'></input>
            </p>
            <p>
                <label for='birthday'>出生日期</label>
                <input type='date' name='birthday' />
            </p>
            <p>
                <label for='gender'>国籍</label>
                <select name='country' data='countries.xml'></select>
            </p>
            <p>
                <label for='photo'>个性头像</label>
                <input type='file' name='photo' accept='image/*' />
            </p>
            <table>
                <thead>
                    <td><button type="add" template="questionId">+</button> 保密问题</td>
                    <td>答案</td>
                    <td></td>
                </thead>
                <tr id="questionId" repeat="template" repeat-start="1" repeat-min="1" repeat-max="3">
                    <td><input type="text" name="questions[questionId].q"></td>
<td><input type="text" name="questions[questionId].a"></td>
<td><button type="remove">删除</button></td>
                </tr>
            </table>
            <p>
                <input type='submit' value='send' class='submit' />
            </p>
        </form>
    </body>
</html>

由于目前HTML5标准仍然在开发中，不同的浏览器对HTML5特性的支持都相当有限。其中Opera在表单方面支持得比较好，本实例在Opera9上运行一切正常，效果图如下：

这个实例运用了一些HTML5的新的表单元素，比如email类型的输入框(ID)，日期类型的输入框(出生日期)。并且使用了重复模型来引导用户填写保密问题，而在个性头像的上传中，通过限制文件类型，方便用户选择图片进行合乎规范的内容上传。而用户选择国籍的下拉选择输入框中，采用的是外联数据源的形式，外联数据源使用coutries.xml，内容如下：

<select xmlns="http://www.w3.org/1999/xhtml">
    <option>China</option>
    <option>Japan</option>
    <option>Korea</option>
</select>

并且form的enctype是application/x-www-form+xml，也就是HTML5的XML提交。所以一旦form校验通过，form的内容将会以XML的形式提交。你还会发现，在ID输入框如果没有值，或者输入了非email类型的字符串时，一旦试图提交表单，就会有提示错误的信息出现，而这都是浏览器内置的。

结语

HTML5对表单控件的更新，无疑是很振奋人心的。本文描述了一部分表单的新特性，还有一部分新特性同样很令人期待。相信随着标准的深入开发以及浏览器对HTML5支持程度的进一步提升，设计一个简单易用的表单的工作，将变得非常轻松。

参考资料

W3C HTML5 规范： http://www.w3.org/TR/html5/
HTML5 与 HTML4的差异：http://www.w3.org/TR/html5-diff/
Opera dev: Improve your forms with HTML5： http://dev.opera.com/articles/view/improve-your-forms-using-html5/
Comparison of layout engines（HTML5）：
http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML_5)

关于作者

蒋博，主要从事Web前端技术的开发工作，在Web开发与性能分析以及敏捷实践等领域有较丰富的经验。对HTML5的发展以及各种JavaScript类库有比较浓厚的兴趣，经常关注社交型的网站发展情况，平常喜欢听音乐，看一些历史类书籍。（本文仅代表个人观点，与公司立场无关。）

给InfoQ中文站投稿或者参与内容翻译工作，请邮件至editors@cn.infoq.com。也欢迎大家加入到InfoQ中文站用户讨论组中与我们的编辑和其他读者朋友交流。

16 条回复

关注此讨论回复

发表人 long lin 发表于

发表人 lei xiangjian 发表于

发表人俊彭发表于

发表人谢彪发表于

发表人半瓶墨水发表于

发表人张凯峰发表于

发表人冯希顺发表于

发表人霍泰稳发表于

发表人 zheng allen 发表于

发表人 chen index 发表于

发表人 chu easin 发表于

发表人 Li Jonas 发表于

发表人 sky blue 发表于

发表人 pan brofe 发表于

发表人 chiarle tom 发表于

按日期倒序排列

返回顶部

这篇文章，我转载到了我的博客。。

发表人 long lin

这篇文章我转到了我的博客，这是地址
lin23871.javaeye.com/blog/413795

如有不妥，请告知，我会立马删除

回复

返回顶部

Re: 这篇文章，我转载到了我的博客。。

发表人 lei xiangjian

文章传达的信息很准确简介，HTML5发展的挺快！
我有个小怀疑，如果HTML什么都做了，以后是否直接提供widget这种WEB UI组件？？？

回复

返回顶部

Re: 纠正上面一个字：简介修改为简洁

发表人 lei xiangjian

文章传达的信息很准确简洁，HTML5发展的挺快！我有个小怀疑，如果HTML什么都做了，以后是否直接提供widget这种WEB UI组件？？？

回复

返回顶部

Re: 这篇文章，我转载到了我的博客。。

发表人 霍泰稳

看到你的转载形式，因为没有侵犯InfoQ中文站的内容，所以没有什么不妥，谢谢你对本文的宣传。这样的形式我们鼓励，你还可以在你的博文里加上这个文章的介绍，这样别人就知道为什么你对这个文章感兴趣，然后通过链接再到InfoQ中文站上来阅读。

回复

返回顶部

写得不错

发表人 zheng allen

虽然有了“内建的表单校验系统”，但是还是需要在服务器端做校验，不过客户端还是减少不少工作量。最重要的是什么时候IE才能支持HTML5，毕竟使用IE的用户是多数。

回复

返回顶部

Re: 纠正上面一个字：简介修改为简洁

发表人 俊彭

文章上看只是加强了form. 不知道对CSS和JS有何影响,应该还无法取代Web UI的吧

回复

返回顶部

HTML需要更多的交互性

发表人 chen index

事件、控件、布局能够内建支持到EXTJS的程度就差不多了

回复

返回顶部

Re: 纠正上面一个字：简介修改为简洁

发表人 张凯峰

文章传达的信息很准确简洁，HTML5发展的挺快！我有个小怀疑，如果HTML什么都做了，以后是否直接提供widget这种WEB UI组件？？？

个人觉得，标准的支持永远无法企及多变的客户需求，但是浏览器厂商的支持让开发者的日子好过了很多。

回复

返回顶部

Re: 纠正上面一个字：简介修改为简洁

发表人 冯希顺

个人觉得，标准的支持永远无法企及多变的客户需求，但是浏览器厂商的支持让开发者的日子好过了很多。

没用，到时候用户又会在HTML5的基础上联想出更花哨更变态的需求。

回复

返回顶部

期待

发表人 chu easin

期待HTML5的高效特性

回复

返回顶部

IE

发表人 Li Jonas

move to firefox 3.5

回复

返回顶部

Re: 纠正上面一个字：简介修改为简洁

发表人 谢彪

对于web数据来说,可能form的加强,意义比较大,其实加强form,你想想,基本没有必要用js做客户端的数据验证了

回复

返回顶部

客户端确实简洁很多

发表人 半瓶墨水

服务端要做的验证一个也不能少，不过这个html5也管不了...

回复

返回顶部

RE

发表人 sky blue

表单验证这块是否有暴露出足够的API来.
否则到时候要改个验证信息/样式都麻烦的话可用性就不高了

而且貌似数据源要求为xml 这样就很有局限性了.

回复

返回顶部

可能那些JS框架要改改路线图了

发表人 pan brofe

前端是省了不少事。期待更多关于HTML5的文章和更多的基于HTML5的应用。

可能那些JS框架要改改路线图了。

回复

返回顶部

html5的确会让人很兴奋

发表人 chiarle tom

html5的确会让人很兴奋,但是还要等几十年,标准才能出来,这10几年会发生什么,谁也不知道

回复

现有用户：

InfoQ

InfoQ

现有用户：

文章

使用HTML5构建下一代的Web Form

相关厂商内容

前言

HTML5的表单新特性

实例分析

结语

参考资料

关于作者

16 条回复

这篇文章，我转载到了我的博客。。

Re: 这篇文章，我转载到了我的博客。。

Re: 纠正上面一个字：简介修改为简洁

Re: 这篇文章，我转载到了我的博客。。

写得不错

Re: 纠正上面一个字：简介修改为简洁

HTML需要更多的交互性

Re: 纠正上面一个字：简介修改为简洁

Re: 纠正上面一个字：简介修改为简洁

期待

IE

Re: 纠正上面一个字：简介修改为简洁

客户端确实简洁很多

RE

可能那些JS框架要改改路线图了

html5的确会让人很兴奋

深度内容

应用云平台的可用性——从新浪SAE看云平台设计

JVM定制改进 @ 淘宝

"伤得起"的云计算应用——对云端应用之架构的思考

让交付的速度跟上思考的速度

架构之路——穿行在产品和业务之间

特性注入：成功三部曲

解析JDK 7的动态类型语言支持

Java Remoting远程服务（下）

现有用户：

新用户：

现有用户：

新用户：

文章

相关厂商内容

前言

HTML5的表单新特性

实例分析

结语

参考资料

关于作者

16 条回复

深度内容