使用 html5 构建下一代的 web form

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类库有比较浓厚的兴趣,经常关注社交型的网站发展情况,平常喜欢听音乐,看一些历史类书籍。(本文仅代表个人观点,与公司立场无关。)

你可能感兴趣的:(WEB,html5,web,input,javascript,forms,email)