html5 表单

版本：HTML5

功能：表单用于向服务器传输数据，从而实现用户与Web服务器的交互。一个表单有三个基本组成部分： 1.表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。2、表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。 3、表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。

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

属性

HTML 元素 表示了文档中的一个区域，这个区域包含有交互控制元件，用来向web服务器提交信息。除全局属性外，还有如下一些属性：

accept-charset

一个空格分隔或逗号分隔的列表（在HTML5中，仅能以空格作为分隔符），这个列表包括了服务器支持的字符编码。浏览器以这些编码被列举的顺序使用它们。默认值是一个保留字符串“UNKNOWN”。这个字符串指的是，和包含这个form元素的文档相同的编码。

action

一个处理这个form信息的程序所在的URL，即向何处提交表单数据。这个值可以被input或者button的formaction属性重载。

autocomplete

用于指示input元素是否能够拥有一个默认值，这个默认值是由浏览器自动补全的。这个设定可以被属于这个form的子元素的 autocomplete 属性重载（覆盖）。 可能的值有:

• off。在每一个用到的输入域里，用户必须显式的输入一个值，或者document以它自己的方式提供自动补全；浏览器不会自动补全输入。
• on。浏览器能够根据用户之前在form里输入的值自动补属性重载（覆盖）。

enctype

• application/x-www-form-urlencoded: 如果属性未指定时的默认值
• multipart/form-data这个值用于一个 type 属性设置为 "file" 的 元素。
• text/plain将文件设置为纯文本的形式，浏览器在获取到这种文件时并不会对其进行处理。

method

浏览器使用这种 HTTP 方式来提交 form。可能的值有:

• post：指的是 HTTP POST 方法;表单数据会包含在表单体内然后发送给服务器。
• get：指的是 HTTP GET 方法;表单数据会附加在 URIaction属性中并以 '?' 作为分隔符, 然后这样得到的 URI 再发送给服务器。当这样做（数据暴露在URI里面）没什么副作用，或者表单仅包含ASCII字符时，再使用这种方法吧。

method的值可以被或者元素中的 formmethod 属性覆盖。

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

name

指定form的名称。HTML5中，一个文档中的多个form当中，name必须唯一而不仅仅是一个空字符串。

novalidate

这个属性是一个布尔属性，指定了是否对表单提交的数据进行验证。如果这个属性没有指定 (因此这个 form 是验证通过的)。这个属性可以被input、button的formnovalidate属性覆盖。

target

指定提交后，在哪里显示响应。有以下几种取值：

• _self：默认值，在当前文档页面加载返回值；
• _blank：在新窗口加载返回值；
• _parent：在父级上下文中加载，如果没有父级，按_self执行；
• _top：如果是HTML 4文档，清空当前文档，加载返回内容；如果是HTML5，在顶级上下文内加载返回值。如果没有父级，按_self执行。
• iframename: 指定的frame中加载。

form表单控件

是form表单中最常用的输入对象之一，具有如下属性：

的type属性

设置控件的类型，默认为text。根据type属性的不同，有不同的作用，的常见type如下：

• button：无缺省行为按钮。
• radio：单选按钮。必须使用 value 属性定义此控件被提交时的值，使用checked指示控件是否被默认选择。在同一个“单选按钮组”中，所有单选按钮的 name 属性使用同一个值； 一个单选按钮组中，同一时间只有一个单选按钮可以被选择。
• checkbox：复选框。必须使用 value 属性定义此控件被提交时的值，使用 checked 属性指示控件是否被选择，也可以使用 indeterminate 指示复选框在一种不确定状态。
• color：HTML5新增 用来指定颜色的控件。
• date：用来输入日期的控件。
• datetime：HTML5新增 基于UTC时区的日期时间输入控件。
• datetime-local:用于输入日期时间的控件，不包含时区。
• month：HTML5新增 输入年月的控件，不带时区。
• week：HTML5新增 用于输入一个由星期-年组成的日期，日期不包括时区。
• time：HTML5新增 用于输入不含时区的时间控件。
• email：HTML5新增 用于编辑email的字段，当提交表单时，会自动地对 email 字段的值进行验证。合适的时候可以使用 :valid 和 :invalid CSS 伪类。
• tel：HTML5新增 用于输入电话号码的控件。
• url：HTML5新增 用于编辑URL的字段。
• file：此控件可以让用户选择文件。使用 accept 属性可以定义控件可以选择的文件类型。
• hidden：不显示在页面上的控件，但它的值会被提交到服务器。
• image：图片提交按钮，必须使用 src 属性定义图片的来源及使用 alt 定义替代文本。
• number：HTML5新增 用于输入浮点数的控件。
• password：用于输入值被掩盖的单行文本字段，可以用maxlength指定输入值的最大长度。
• range：HTML5新增 用于输入不精确值控件。
• reset：用于将表单所内容设置为缺省值的按钮。
• submit：用于提交表单的按钮。
• search：HTML5新增 用于输入搜索字符串的单行文本字段，如果换行会从输入的值中自动移除。
• text：单行字段，换行会将自动从输入的值中移除。

属性

• accept：如果该元素的 type 属性的值是file,则该属性表明了服务器端可接受的文件类型；否则它将被忽略。
• autocomplete：HTML5新增 设置是否自动填充，如果type属性的值是hidden、checkbox、radio、file，或为按钮类型（button、submit、reset、image），则本属性被忽略。
• autofocus：HTML5新增 设置在页面加载时自动获得焦点，如果type属性设置为隐藏则不能应用。
• autosave：设置保存填写数据，如果type的属性的值是search，当页面加载时，之前的搜索项目会在下拉菜单中出现。
• checked：如果该元素的type属性的值为radio或者checkbox，则该布尔属性的存在与否表明了该控件是否是默认选择状态。
• disabled：表示此控件被禁用，在禁用的控件中， click事件将不会被分发，且禁用的控件的值在提交表单时也不会被提交 。如果type属性为hidden，此属性将被忽略。
• form：设置与此控件关联的表单，该属性的值与所关联的的id一致。
• formaction：表示处理提交信息的程序的URI，如果指定了，将重写所属的action属性。
• formenctype：如果的类型是submit或image，此属性值指定提交表单到服务器的内容类型，如果指定了，将重写所属的enctype属性。
• formmethod：如果的类型是submit或image，此属性指定了提交表单的HTTP方法。
• height： 如果type属性是image，此属性指定image的显示高度。
• width：如果type属性是image，此属性指定image的显示宽度。
• list：HTML5新增 这个属性可为用户预设一组输入选项，其值与同一文档中的的id一致。
• max：HTML5新增 设置日期或数字的最大值。
• min：HTML5新增 设置日期或数字的最小值。
• multiple：HTML5新增 当type属性为email或file时，设置用户是否可以输入多个值。
• name：设置控件的名称。
• pattern：HTML5新增 检查输入值的正则表达式。
• placeholder：HTML5新增 提示用户可能的输入值。
• readonly：设置输入值是否不可修改；如果type是hidden，range，color，checkbox，radio，file或button，则该属性可忽略。
• required：HTML5新增 设置用户在提交表单时该控件的值必填。
• spellcheck：设置拼写检查。
• src：如果type为image，该属性设置了image的source。
• value：设置控件的初始值，除了type是checkbox或radio时必须指定value的值，其他情况下该属性是可选的。

表示一个可以点击的按钮，元素比元素更易样式化，元素内部可以添加内联HTML内容（如，甚至），并使用:after和:before伪元素实现复杂的渲染。但是不可以放图像映射，因为它对鼠标和键盘敏感的动作会干扰按钮的行为。

有如下常见属性：

• autofocus：一个布尔属性，规定页面加载时按钮自动获得输入焦点。
• disabled：设置用户不能与按钮进行交互。
• form：表示元素关联的元素（它的表单拥有者）。
• formaction：表示处理提交信息的程序的URI，如果指定了，将重写所属的action属性。
• formenctype：如果是的类型是submit，此属性值指定提交表单到服务器的内容类型。如果指定了，将重写所属的enctype属性。
• formnovalidate：此属性指定提交时不需要验证。如果指定了，它会重写所属的novalidate属性。
• formtarget：如果是submit类型，此属性指定表单数据提交后在哪里显示响应。如果指定了，它会重写所属的target属性。
• name：指定的名称。
• type：指定的类型。包括：submit，reset，button和menu。
• value：指定的初始值。

，，，

可创建选项菜单，菜单内的选项为，可由分组。
具有如下属性：

• autofocus：让一个对象在页面加载后自动获得焦点。
• disabled：禁用下拉列表。
• form：指定所关联的表单。
• multiple：HTML5新增 设置select是否可以多选，默认为单选。
• name：指定控件名称。
• required：HTML5新增 规定用户提交表单时，select的值不能为空。
• size：规定下拉列表可见选项的数量。
• 会创建包含在中的一组选项，有两个属性：
• disabled 该选项组中的选项被禁用。
• label 设置选项组的名字。
• 可以在设置弹出窗口或其他项目列表中的菜单项，有如下属性：
• disabled：设置选项不可选。
• selected：设置初始被选中的选项。
• value：设置选项被选中时，提交给表单的值。
  例如：

 Option 1.1
   
  
    Option 2.1
    Option 2.2 

HTML5新增控件类型

email输入类型

此类型要求输入格式正确的email地址，否则浏览器是不允许提交的，并会有一个错误信息提示。此类型在Opera中必须指定name值，否则无效果。

url输入类型

上面代码展示的文本域要求输入格式正确的URL地址，Opera中会自动在开始处添加

日期时间相关输入类型

date,time,datetime,datetime-local,month,week

这一系列是很酷的一个类型，完全解决了烦琐的JS日历控件问题.但目前MS只有Opera/Chrome新版本支持，且展示效果也不一样。

number输入类型

此类型将显示一个可拖动的滑块条，并可通过设定max/min/step值限定拖动范围.拖动时会反馈给value一个值。

search输入类型

此类型表示输入的将是一个搜索关键字,通过results=s 或者 x-webkit-speech 可显示一个搜索小图标. [在chrome下才能看得见]

tel输入类型

此类型要求输入一个电话号码，但实际上它并没有特殊的验证，与text类型没什么区别。

color输入类型

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

keygen输入类型

keygen 标签规定用于表单的密钥对生成器字段。当提交表单时，私钥存储在本地，公钥发送到服务器。所有主流浏览器都支持 keygen 标签，除了 Internet Explorer 和 Safari。

新增表单属性

placeholder属性

这是一个很实用的属性，免去了用JS去实现点击清除表单初始值.浏览器支持也还不错，MS除了Firefox，其他标准浏览器都能很好的支持。

require属性

表单验证属性。为require类型时，若输入值为空，则拒绝提交，并会有一个提示。上面两种写法都对。这个很有用。并且可以用于textareahiddenimagesubmit类型。

pattern属性

pattern类型为正则验证,可以完成各种复杂的验证。这两种类型在Opera中必须指定name值，否则无效果。

autofocus属性

默认聚焦属性，可在页面加载时聚焦到一个表单控件，类似于JS的focus()。

list属性

a b c

该属性需要与datalist标签共用，datalist是对选择框的记忆，而list属性可以为选择框自定义记忆的内容。

注释：Internet Explorer 不支持 meter 标签。

progress标签

progress标签定义运行中的进度（进程）。可以使用 progress 标签来显示 JavaScript 中耗费时间的函数的进度。

注释：Internet Explorer 9 以及更早的版本不支持progress标签。

四种常见的 POST 提交数据方式（application/x-www-form-urlencoded，multipart/form-data，application/json，text/xml）

HTTP/1.1 协议规定的 HTTP 请求方法有options、get、head、post、put、elete、trace、connect这几种。其中 POST 一般用来向服务端提交数据，本文主要讨论 POST 提交数据的几种方式。

我们知道，HTTP 协议是以 ASCII 码传输，建立在 TCP/IP 协议之上的应用层规范。规范把 HTTP 请求分为三个部分：状态行、请求头、消息主体。类似于下面这样：

协议规定 POST 提交的数据必须放在消息主体（entity-body）中，但协议并没有规定数据必须使用什么编码方式。实际上，开发者完全可以自己决定消息主体的格式，只要最后发送的 HTTP 请求满足上面的格式就可以。

但是，数据发送出去，还要服务端解析成功才有意义。一般服务端语言如 php、python 等，以及它们的 framework，都内置了自动解析常见数据格式的功能。服务端通常是根据请求头（headers）中的 Content-Type 字段来获知请求中的消息主体是用何种方式编码，再对主体进行解析。所以说到 POST 提交数据方案，包含了 Content-Type 和消息主体编码方式两部分。下面就正式开始介绍它们。

application/x-www-form-urlencoded

这应该是最常见的 POST 提交数据的方式了。浏览器的原生表单，如果不设置enctype属性，那么最终就会以application/x-www-form-urlencoded方式提交数据。请求类似于下面这样（无关的请求头在本文中都省略掉了）：

POST https://www.baikegou.com HTTP/1.1
	Content-Type: application/x-www-form-urlencoded;charset=utf-8
	title=test&sub%5B%5D=1&sub%5B%5D=2&sub%5B%5D=3

首先，Content-Type 被指定为 application/x-www-form-urlencoded；其次，提交的数据按照 key1=val1&key2=val2 的方式进行编码，key 和 val 都进行了 URL 转码。大部分服务端语言都对这种方式有很好的支持。例如 PHP 中，$_POST['title']可以获取到 title 的值，$_POST['sub'] 可以得到 sub 数组。

很多时候，我们用 Ajax 提交数据时，也是使用这种方式。例如 JQuery 和 QWrap 的 Ajax，Content-Type 默认值都是application/x-www-form-urlencoded;charset=utf-8。

multipart/form-data

这又是一个常见的 POST 数据提交的方式。我们使用表单上传文件时，必须让的enctype等于这个值。直接来看一个请求示例：

POST https://www.baikegou.com HTTP/1.1
	Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryrGKCBY7qhFd3TrwA
	------WebKitFormBoundaryrGKCBY7qhFd3TrwA
	Content-Disposition: form-data; name="text"
	title
	------WebKitFormBoundaryrGKCBY7qhFd3TrwA
	Content-Disposition: form-data; name="file"; filename="chrome.png"
	Content-Type: image/png
	PNG ... content of chrome.png ...
	------WebKitFormBoundaryrGKCBY7qhFd3TrwA--

这个例子稍微复杂点。首先生成了一个 boundary 用于分割不同的字段，为了避免与正文内容重复，boundary 很长很复杂。然后 Content-Type 里指明了数据是以 mutipart/form-data 来编码，本次请求的 boundary 是什么内容。消息主体里按照字段个数又分为多个结构类似的部分，每部分都是以 –boundary 开始，紧接着内容描述信息，然后是回车，最后是字段具体内容（文本或二进制）。如果传输的是文件，还要包含文件名和文件类型信息。消息主体最后以 –boundary– 标示结束。关于 mutipart/form-data 的详细定义，请前往 rfc1867 查看。

这种方式一般用来上传文件，各大服务端语言对它也有着良好的支持。

上面提到的这两种 POST 数据的方式，都是浏览器原生支持的，而且现阶段原生表单也只支持这两种方式。但是随着越来越多的 Web 站点，尤其是 WebApp，全部使用 Ajax 进行数据交互之后，我们完全可以定义新的数据提交方式，给开发带来更多便利。

application/json

application/json这个 Content-Type 作为响应头大家肯定不陌生。实际上，现在越来越多的人把它作为请求头，用来告诉服务端消息主体是序列化后的 JSON 字符串。由于 JSON 规范的流行，除了低版本 IE 之外的各大浏览器都原生支持 JSON.stringify，服务端语言也都有处理 JSON 的函数，使用 JSON 不会遇上什么麻烦。

JSON 格式支持比键值对复杂得多的结构化数据，这一点也很有用。记得我几年前做一个项目时，需要提交的数据层次非常深，我就是把数据 JSON 序列化之后来提交的。不过当时我是把 JSON 字符串作为 val，仍然放在键值对里，以 x-www-form-urlencoded 方式提交。

Google 的 AngularJS 中的 Ajax 功能，默认就是提交 JSON 字符串。例如下面这段代码：

vardata = {'title':'test', 'sub': [1,2,3]};
	$http.post(url, data).success(function(result) {
	    ...
	});

最终发送的请求是：

POST https://www.baikegou.com HTTP/1.1
	Content-Type: application/json;charset=utf-8
	{"title":"test","sub":[1,2,3]}

这种方案，可以方便的提交复杂的结构化数据，特别适合 RESTful 的接口。各大抓包工具如 Chrome 自带的开发者工具、Firebug、Fiddler，都会以树形结构展示 JSON 数据，非常友好。但也有些服务端语言还没有支持这种方式，例如 php 就无法通过 $_POST 对象从上面的请求中获得内容。这时候，需要自己动手处理下：在请求头中 Content-Type 为 application/json 时，从 php://input 里获得原始输入流，再 json_decode 成对象。一些 php 框架已经开始这么做了。

当然 AngularJS 也可以配置为使用 x-www-form-urlencoded 方式提交数据。如有需要，可以参考这篇文章。

text/xml

我的博客之前提到过 XML-RPC（XML Remote Procedure Call）。它是一种使用 HTTP 作为传输协议，XML 作为编码方式的远程调用规范。典型的 XML-RPC 请求是这样的：

POST https://www.baikegou.com HTTP/1.1
	Content-Type: text/xml
	
	
	    examples.getStateName
	    
	        
	            41 

XML-RPC 协议简单、功能够用，各种语言的实现都有。它的使用也很广泛，如 WordPress 的 XML-RPC Api，搜索引擎的 ping 服务等等。JavaScript 中，也有现成的库支持以这种方式进行数据交互，能很好的支持已有的 XML-RPC 服务。不过，我个人觉得 XML 结构还是过于臃肿，一般场景用 JSON 会更灵活方便。

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com