中国领先的IT技术网站
|
|

使用HTML5构建下一代的Web Form

本文介绍使用HTML5构建下一代的Web Form,以及介绍HTML5的表单新特性和实例分析。

作者:蒋博来源:infoq|2009-06-26 09:06


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表单做了改进:

1.新的控件类型
◆还在为类型检查犯愁吗,还在为那一长串看不太明白的检验输入的正则表达式而苦恼吗,HTML5提供的一系列新的控件将天然的具备类型检查的功能。比如说URL输入框,Email输入框等。

  1. <input type="url">input> 
  2. <input type="email">input> 

◆当然还有非常重要的日期输入框,要知道使用JavaScript和CSS来“手工”制作一个日期输入框还是非常花功夫的,类似Dojo,YUI这样的类库也无不在这个widget上面大做文章。

  1. <input type="date">input> 

◆作为我痛苦记忆的一部分,我经常记得我们开发人员要为一个select下拉别表动态的添加非常多的选项,这些选项大多数都是来自数据库,比如说国家、省市列表等等。这个事情非常繁琐。HTML5将支持data属性,为select控件外联数据源!

  1. <select data="http://domain/getmyoptions">select> 

2.改进的文件上传控件,你可以使用一个控件上传多个文件,自行规定上传文件的类型(accept),你甚至可以设定每个文件最大的大小(maxlength)。你看出它和一般操作系统提供的文件上传控件的区别了吗,反正我觉得基本一致了。在HTML5应用中,文件上传控件将变得非常强大和易用。

3.重复(repeat)的模型,HTML5提供一套重复机制来帮助我们构建一些重复输入列表,其中包括一些诸如 add、remove、move-up,move-down的按钮类型,通过这一套重复的机制,开发人员可以非常方便的实现我们经常看到的编辑列表,这是一个很常见的模式,我们可以增加一个条目、删除某个条目、或者移动某个条目等等。

4.内建的表单校验系统,HTML5为不同类型的输入控件各自提供了新的属性,来控制这些控件的输入行为,比如我们常见的必填项required属性,以及为数字类型控件提供的max、min等。而在你提交表单的时候,一旦校验错误,浏览器将不执行提交操作,而会显示相应的检验错误信息。

  1. <input type="text" required>input> 
  2. <input type="number" min=10  max=100>input> 

5.XML Submission,我们一般常见的是Web Form的编码格式是application/x-www-form-urlencoded。开发人员都很清楚这种格式,数据送到服务器端,可以方便的存取。HTML5提供一种新的数据格式:XML Submission,即application/x-www-form+xml。简单的举例说,服务器端将直接接收到XML形式的表单数据。

  1. <submission> 
  2.     <field name="name" index="0">Peterfield> 
  3.     <field name="password" index="0">passwordfield> 
  4. submission> 

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

  1. > 
  2. <html> 
  3.     <head> 
  4.         <style> 
  5.             p label {  
  6.                 width: 180px;  
  7.                 float: left;  
  8.                 text-align: right;  
  9.                 padding-right: 10px  
  10.             }  
  11.             table {  
  12.                 margin-left: 80px  
  13.             }  
  14.             table td {  
  15.                 border-bottom: 1px solid #CCCCCC  
  16.             }  
  17.             input.submit {  
  18.                 margin-left: 80px  
  19.             }  
  20.         style> 
  21.     head> 
  22.     <body> 
  23.         <form action='/register' enctype="application/x-www-form+xml" method="post"> 
  24.             <p> 
  25.                 <label for='name'>ID(请使用Email注册)label> 
  26.                 <input name='name' required type='email'>input> 
  27.             p> 
  28.             <p> 
  29.                 <label for='password'>密码label> 
  30.                 <input name='password' required type='password'>input> 
  31.             p> 
  32.             <p> 
  33.                 <label for='birthday'>出生日期label> 
  34.                 <input type='date' name='birthday' /> 
  35.             p> 
  36.             <p> 
  37.                 <label for='gender'>国籍label> 
  38.                 <select name='country' data='countries.xml'>select> 
  39.             p> 
  40.             <p> 
  41.                 <label for='photo'>个性头像label> 
  42.                 <input type='file' name='photo' accept='image/*' /> 
  43.             p> 
  44.             <table> 
  45.                 <thead> 
  46.                     <td><button type="add" template="questionId">+button> 保密问题td> 
  47.                     <td>答案td> 
  48.                     <td>td> 
  49.                 thead> 
  50.                 <tr id="questionId" repeat="template" repeat-start="1" repeat-min="1" repeat-max="3"> 
  51.                     <td><input type="text" name="questions[questionId].q">td> 
  52. <td><input type="text" name="questions[questionId].a">td> 
  53. <td><button type="remove">删除button>td> 
  54.                 tr> 
  55.             table> 
  56.             <p> 
  57.                 <input type='submit' value='send' class='submit' /> 
  58.             p> 
  59.         form> 
  60.     body> 
  61. html> 

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

HTML5的表单元素


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

  1. <select xmlns="http://www.w3.org/1999/xhtml"> 
  2.     <option>Chinaoption> 
  3.     <option>Japanoption> 
  4.     <option>Koreaoption> 
  5. select> 

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

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

【编辑推荐】

  1. IBM演示下一代网络技术 初试HTML5
  2. HTML5-不需要Flash插件的YouTube
  3. Google将推出开发者社区 改善Web性能
  4. 让JavaScript拯救HTML5的离线存储
  5. Web3.0、关联数据和语义网
【责任编辑:志京 TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢

读 书 +更多

人月神话:32周年中文纪念版

在软件领域,很少能有像《人月神话》一样具有深远影响力并且畅销不衰的著作。Brooks博士为人们管理复杂项目提供了最具洞察力的见解。既有很...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊
× 学习达标赢Beats耳机