HTML5表单的新功能

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

HTML结构更加自由

XHTML中需要放在form之中的诸如input/button/select/textarea等标签元素，在HTML 5中完全可以放在页面任何位置，然后通过新增的form属性指向元素所属表单的ID值，即可关联起来。

    <form id="form0" action="http://www.baidu.com"></form>
    <input type="search" form="form0" name="kw">

新增控件类型

1. Email/Url类型

    <input type="email" name="email"></input> 
    <input type="url" name="url"></input> 

必须输入正确的email/url地址，表单才能正常提交。

1. search

    <input type="search" search="s"></input> 

此类型表示输入的将是一个搜索关键字，通过results=s可显示一个搜索小图标。

1. number/range

    <input type="number" name="points" min="5" step="5" max="100" />
    <input type="range" name="points" min="5" step="5" max="100" />

不同的数字输入模式

1. color

    <input type="color"></input> 

此类型可让用户通过颜色选择器选择一个颜色值，并反馈到value中。

1. date/month/week/time/datetime 日期选择器

    <input type="date" name="user_date" />

新增表单属性

1. placeholder

    <input type="text" placeholder="请输入用户名"></input>

1. require/pattern

    <input type="text" name="require" required=""></input> 
    <input type="text" name="require1" required="required"></input> 
    <input type="text" name="require2" pattern="^[1-9]\d{5}$"></input> 

1. autofocus

    <input type="text" autofocus="true"></input> 

页面初始时，聚焦

1. list

    <input type="text" list="ilist"/> 
    <datalist id="ilist"> 
        <option label="a" value="a"></option> 
        <option label="b" value="b"></option> 
        <option label="c" value="c"></option> 
    </datalist>

list 属性规定输入域的 datalist。datalist 是输入域的选项列表。

1. multiple 规定输入域中可选择多个值。

    <input type="file" name="img" multiple="multiple" />

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