深入理解Form表单

前言：随着框架的普遍，原生的Form表单用得很少了（我用得不多）。框架也是从原生来的，先把基础的理解透彻了，以后出现了bug也好解决。

一、Form表单的作用

Form表单是用户与服务器（或应用程序）交互的桥梁。用户通过Form表单将数据发送到服务器上，但是web网页也可以拦截Form表单的数据。

二、一个基本的Form表单

  <form action="/handleForm" method="post">
    <div>
      <label for="name">姓名：</label>
      <input type="text" id="name" name="user_name">
    </div>
    <div>
      <label for="email">邮箱：</label>
      <input type="email" id="email" name="user_email">
    </div>
    <div>
      <label for="msg">信息：</label>
      <textarea id="msg" cols="30" rows="10" name="user_msg"></textarea>
    </div>
     <div>
      <button type="submit">提交</button>
    </div>
  </form>

这是一个简单的form表单，action 表示表单提交的url，method 表示表单提交的HTTP方式，有 get 、post、dialog 三种选项。在这个例子中，点击 button 按钮时，表单会发送三个已命名（name）的数据块 user_name、user_email、user_msg。这些数据会用 HTTP 的 POST 方法，把信息发送到URL为 /handleForm 目录下。

在服务端，位于URL /handleForm 上的脚本将接受HTTP请求中包含的3个键值对。

action 的 url:
- 当 url 为相对路径时：表单数据会提交到自己站点上
- 当 url 为绝对路径时：表单数据会提交到自己站点之外。当前后端部署路径不同时，使用绝对路径。
- 当 url 为空时：表单数据提交到当前页面的URL上。（HTML5开始，不需要使用#）
method 的两个常用选项：
- GET：请求服务器资源。浏览器发送一个空的主体，发送的数据被追加到URL上了。可以直接在浏览器的URL中看到用户输入的数据。所以GET 不适合发送大量数据或包含安全信息的数据。
- POST：使用 POST 方法提交表单时，数据不会被附加到URL上，HTTP请求头中会有 Content-Type: application/x-www-form-urlencoded ，发送的数据会放在请求体中。

三、使用Form表单发送文件

由于HTTP是一种文本型协议，所以处理二进制数据有特殊的要求。需要设置Form表单的 enctype 属性。

enctype属性：这个属性指定了提交表单时请求头中的 Content-Type。Content-Type 大家都耳熟能详了，它是告诉服务器，咱们浏览器发送过去的数据是什么类型。使用 POST 方法时，Content-Type 默认的值是 x-www-urlencoded。意思是：“这是已经编码为URL参数的表单数据”

想要发送文件，需要以下步骤

将表单的 method 设置为 POST。因为文件内容不能放入URL参数中
将 enctype 的值设置为 multipart/form-data。因为数据将会被分成多个部分，每个文件单独占一个部分，表单正文中包含的文本数据（如果有的话）占用一个部分。
包含一个或多个 <input type="file">，这样用户才能上传文件

代码：

<form method="post" enctype="multipart/form-data">
  <div>
    <label for="file">选择文件</label>
    <input type="file" id="file" name="myFile">
  </div>
  <div>
    <button>上传文件</button>
  </div>
</form>

tip：如果想上传多个文件，在 input 中添加 multiple 属性。

四、表单小部件

表单小部件，指的是组成表单的基本HTML元素，如 <input> ，<button>，<checkbox> 等。基本的表单部件我就不说了，我说几个少见的原生部件

进度条： <progress>
仪表： <meter>
滑块： <input type="range">
数字输入： <input type="number" max="10" min="1">
and so on...

五、表单的安全问题

每次向服务器发送数据时，都需要考虑安全性。到目前为止，表单是最常见的攻击路径。但是这些问题都不是来自表单，而来自于服务器如何处理数据。

比较出名的安全问题：

XSS和CSRF

简单介绍一下跨站脚本（XSS）和跨站点请求伪造（CSRF）
- xss：用户通过各种方式将恶意代码注入到其他用户的页面中。就可以通过脚本获取信息，发起请求，之类的操作。
- CSRF：跨站请求攻击，简单地说，是攻击者通过一些技术手段欺骗用户的浏览器去访问一个自己曾经认证过的网站并运行一些操作（如发邮件，发消息，甚至财产操作如转账和购买商品）。由于浏览器曾经认证过，所以被访问的网站会认为是真正的用户操作而去运行。这利用了web中用户身份验证的一个漏洞：简单的身份验证只能保证请求发自某个用户的浏览器，却不能保证请求本身是用户自愿发出的。CSRF并不能够拿到用户的任何信息，它只是欺骗用户浏览器，让其以用户的名义进行操作。
XSS攻击利用用户对web站点的信任，而CSRF攻击则利用网站对其用户的信任。
SQL注入

SQL 注入是一种试图在目标web站点使用的数据库上执行操作的攻击类型。这通常包括发送一个SQL请求，希望服务器能够执行它（通常发生在应用服务器试图存储由用户发送的数据时）。

程序员该如何避免这些问题呢？因为我还没处理过安全问题，所以讲不出答案。但是我有一个原则： 永远不要相信用户。

五、使用XHR发送表单数据

目前基本是这种方式来发送表单数据了，首先是很方便，可以对用户的输入做逻辑处理，还可以封装HTTP请求，形成过滤的的效果，处理Token等。这种方式我在之前的博客里面讲过了。这里不再复述。

六、 Form表单的样式

我曾经尝试过去修改一些表单部件的样式，很生硬，建议是使用UI组件，或者用其他HTML标签来模拟。