BT

如何利用碎片时间提升技术认知与能力? 点击获取答案

使用HTML5构建下一代的Web Form

| 作者 蒋博 关注 0 他的粉丝 发布于 2009年6月23日. 估计阅读时间: 16 分钟 | Google、Facebook、Pinterest、阿里、腾讯 等顶尖技术团队的上百个可供参考的架构实例!

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支持程度的进一步提升,设计一个简单易用的表单的工作,将变得非常轻松。

参考资料

  1. W3C HTML5 规范: http://www.w3.org/TR/html5/
  2. HTML5 与 HTML4的差异:http://www.w3.org/TR/html5-diff/
  3. Opera dev: Improve your forms with HTML5: http://wiht.link/guidetohtml5
  4. 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中文站用户讨论组中与我们的编辑和其他读者朋友交流。

评价本文

专业度
风格

您好,朋友!

您需要 注册一个InfoQ账号 或者 才能进行评论。在您完成注册后还需要进行一些设置。

获得来自InfoQ的更多体验。

告诉我们您的想法

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

这篇文章,我转载到了我的博客。。 by long lin

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

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

Re: 这篇文章,我转载到了我的博客。。 by lei xiangjian

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

Re: 纠正上面一个字 :简介修改为简洁 by lei xiangjian

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

Re: 这篇文章,我转载到了我的博客。。 by 霍 泰稳

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

写得不错 by zheng allen

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

Re: 纠正上面一个字 :简介修改为简洁 by 俊 彭

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

HTML需要更多的交互性 by chen index

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

Re: 纠正上面一个字 :简介修改为简洁 by 张 凯峰

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


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

Re: 纠正上面一个字 :简介修改为简洁 by 冯 希顺

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





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

期待 by chu easin

期待HTML5的高效特性

IE by Li Jonas

move to firefox 3.5

Re: 纠正上面一个字 :简介修改为简洁 by 谢 彪

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

客户端确实简洁很多 by 半瓶 墨水

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

RE by sky blue

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

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

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

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

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

html5的确会让人很兴奋 by chiarle tom

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

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

16 讨论

登陆InfoQ,与你最关心的话题互动。


找回密码....

Follow

关注你最喜爱的话题和作者

快速浏览网站内你所感兴趣话题的精选内容。

Like

内容自由定制

选择想要阅读的主题和喜爱的作者定制自己的新闻源。

Notifications

获取更新

设置通知机制以获取内容更新对您而言是否重要

BT