表单

表单是个很麻烦又不能省略的东西。在此总结一些使用表单的小技巧以供查阅。

1. enctype的取值：

• "application/x-www-form-urlencoded"，默认地，在发送到服务器之前，所有字符都会进行编码（空格转换为 "+" 加号，特殊符号转换为 ASCII HEX 值）；
• "multipart/form-data"，唯一能够发送文件的编码格式,不对字符编码；
• "text/plain"，空格转换为 "+" 加号，但不对特殊字符编码。

2. 关于"multipart/form-data"：

浏览器会把表单中需要提交的项目分隔，并为每个部分加上Content-Disposition(form-data或者file),Content-Type(默认为text/plain),name(控件name)等信息，并加上分割符(boundary)。

<form action="http://server.com/cgi/handle" enctype="multipart/form-data"  method="post"> 
  <input type="text" name="submit-name" value="chmod777"><br /> 
  <label>What files are you sending? </label> <input type="file" name="files"><br />
</form>

则有如下body:

Content-Type: multipart/form-data; boundary=AaB03x

--AaB03x
Content-Disposition: form-data; name="submit-name"

chmod777
--AaB03x
Content-Disposition: form-data; name="files"; filename="file1.txt"
Content-Type: text/plain

... contents of file1.txt ...
--AaB03x--

3. 发送出去的数据：

1. 数据拼接的位置：
   如果method是get，编码后的数据将会被拼接在url中；
   其他情况下，数据将会封装到http body中发送到服务器。
2. 对于checkbox，发送的数据会类似于：{ check: c1, check: c2, check: c3 }这种形式，而不是理想的{ check: [c1, c2, c3] }。

4. 如果想在表单中增加一些其他的数据（比如token/id等等），有两种方法：

1. 在表单中增加一个type="hidden"的input元素；
2. 封装一个FormData对象，并向其中增加一个字段。

5. 介绍一下FormData：

参考资料：FormData -- MDN
参考资料：FormData 对象的使用 -- MDN

1) 构造函数：

new FormData (form? : HTMLFormElement)

• form (可选)
  一个HTML表单元素,可以包含任何形式的表单控件,包括文件输入框。

2) 方法：

1. append(): 给当前FormData对象添加一个键/值对。如果这个键已经存在，这个操作会失败，但返回值永远是undefined。

   void append(name, value/Blob/File[, optional filename]);
   

以前因为某种安全策略问题，FormData只有append一个方法。FormData类型一旦被创建，是不能被查看和修改的。以下方法均为新增，可在Web Worker中运行。

2. delete(name)
3. entries()：迭代器
4. get(name): 如果没有值，则返回null。
5. getAll(name): （例如checkbox）一直返回一个数组包含指定key的所有值。
6. has(name): 返回Boolean类型
7. keys()： 迭代器
8. set(name, value[, filename]): 区别于append，会覆盖已存在的值。
9. values(): 迭代器

无需逐一获取$("input").val()，现在你可以基于一个表单元素创建一个FormData，或者从零开始创建，通过get和set重新处理这些数据，然后使用Ajax将数据发送出去。

6. File类型（继承于Blob类型）

太长不讲系列：
File -- MDN
Blob -- MDN
简单说，File对象一旦创建，不可修改，所有属性均为只读。但Blob存在一个方法slice，允许截取其中的一段创建一个新的Blob对象。
查看File对象需要一个FileReader实例。FileReader -- MDN

7. Form元素的行为

1. form.submit()
   提交表单行为.该行为可以通过submit事件改写：

document.querySelector("form").onsubmit = function (ev) {
  ev.preventDefault();
  // Your code here 
}

2. form.reset()
   重置表单，可以将表单状态恢复到初始状态（不是空白状态）。

8. 补充：

1. 在IE中报错：SCRIPT******:参数是必须的；
   在Chrome中错误为：Maximum call stack size exceeded.（栈溢出）。
   这就是为什么建议使用Chrome调试前端页面([doge])。

提供一个小表单DEMO，可以从控制台查看表单信息。