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>