form元素

1. 定义

所有HTML表单都以一个form元素开始：

<form action="/my-handling-form-page" method="post">

</form>

这个元素正式定义了一个表单。就像div元素或p元素，它是一个容器元素，但它也支持一些特定的属性来配置表单的行为方式。它的所有属性都是可选的，但实践中最好至少要设置action属性和method属性。

• action 属性定义了在提交表单时,应该把所收集的数据送给谁(/那个模块)(URL)去处理。.
• method 属性定义了发送数据的HTTP方法(它可以是“get”或“post”).

2. Method 属性

method 属性规定在提交表单时所用的 HTTP 方法（GET 或 POST）：

<form action="action_page.php" method="GET">

或：

2.1.1 get方法和post方法

属性定义了如何发送数据。HTTP协议提供了几种执行请求的方法；HTML表单数据可以通过许多不同的方法进行数据传输，其中最常见的是GET方法和POST方法。

为了理解这两种方法之间的区别，让我们回过头来看看HTTP是如何工作的。
每当您想要访问Web上的资源时，浏览器都会向URL发送一个请求。
HTTP请求由两个部分组成：一个包含关于浏览器功能的全局元数据集的头部，和一个包含服务器处理特定请求所需信息的主体。

a. GET 方法

GET方法是浏览器使用的方法，请求服务器返回给定的资源:“嘿，服务器，我想要得到这个资源。”在这种情况下，浏览器发送一个空的主体。由于主体是空的，如果使用该方法发送一个表单，那么发送到服务器的数据将被追加到URL。

考虑下面这个表单：

  <div>
    <label for="say">What greeting do you want to say?</label>
    <input name="say" id="say" value="Hi">
  </div>
  <div>
    <label for="to">Who do you want to say it to?</label>
    <input name="to" id="to" value="Mom">
  </div>
  <div>
    <button>Send my greetings</button>
  </div>
</form>

由于已经使用了GET方法，当你提交表单的时候，您将看到www.foo.com/?say=Hi&to=Mom在浏览器地址栏里。

数据作为一系列的名称/值对被附加到URL。在URL web地址结束之后，我们得到一个问号(?)，后面跟着由一个与符号(&)互相分隔开的名称/值对。在本例中，我们将两个数据传递给服务器。

• say, 它有一个 Hi的值。
• to, 它有一个 Mom的值。

HTTP请求如下：

GET /?say=Hi&to=Mom HTTP/2.0
Host: foo.com

拓展：百分号编码

b. POST 方法

POST方法略有不同。这是浏览器在询问响应时使用与服务器通信的方法，该响应考虑了HTTP请求正文中提供的数据:“嘿，服务器，看一下这些数据，然后给我回一个适当的结果。”如果使用该方法发送表单，则将数据追加到HTTP请求的主体中。

让我们来看一个例子，这是我们在上面的GET部分中所看到的相同的形式，但是使用method属性设置为post。

<form action="http://foo.com" method="post">
  <div>
    <label for="say">What greeting do you want to say?</label>
    <input name="say" id="say" value="Hi">
  </div>
  <div>
    <label for="to">Who do you want to say it to?</label>
    <input name="to" id="to" value="Mom">
  </div>
  <div>
    <button>Send my greetings</button>
  </div>
</form>

Copy to Clipboard

当使用POST方法提交表单时，没有数据会附加到URL，HTTP请求看起来是这样的，而请求主体中包含的数据是这样的：

POST / HTTP/2.0
Host: foo.com
Content-Type: application/x-www-form-urlencoded
Content-Length: 13

say=Hi&to=Mom

Content-Length数据头表示主体的大小，Content-Type数据头表示发送到服务器的资源类型。

2.1.2 查看HTTP请求

HTTP请求永远不会显示给用户(如果您想要看到它们，您需要使用诸如Firefox Network Monitor或Chrome Developer Tools之类的工具)。例如，您的表单数据将显示在Chrome网络选项卡中：

1. 按下 F12
2. 选择 "Network"
3. 选择 "All"
4. 在 "Name" 标签页选择 "foo.com"
5. 选择 "Headers"

你可以获得表单数据，像下图显示的那样

唯一显示给用户的是被调用的URL。正如我们上面提到的，使用GET请求用户将在他们的URL栏中看到数据，但是使用POST请求用户将不会看到。这一点很重要，有两个原因：

1. 如果您需要发送一个密码(或其他敏感数据)，永远不要使用GET方法否则数据会在URL栏中显示，这将非常不安全。
2. 如果您需要发送大量的数据，那么POST方法是首选的，因为一些浏览器限制了URL的大小。此外，许多服务器限制它们接受的URL的长度。

3. file和enctype属性

file属性：上传文件到服务器

上传的话除了定义type属性为file，将递交表单定义为post外

enctype属性

enctype属性规定了在发送到服务器之前，应该如何对表单的数据进行编码，只有正确编码的数据，才能完整地传递给服务器

input中的accept属性给用户规定对于上传文件的内容

MIME类型的列表

name=“MAX_FILE_SIZE”value=1024 来规定上传的类型，单位为字节

特殊案例:发送文件

用HTML表单发送文件是一个特殊的例子。文件是二进制数据——或者被认为是这样的——而所有其他数据都是文本数据。由于HTTP是一种文本协议，所以处理二进制数据有特殊的要求。

enctype属性允许您指定在提交表单时所生成的请求中的Content-Type的HTTP数据头的值。这个数据头非常重要，因为它告诉服务器正在发送什么样的数据。默认情况下，它的值是application/x-www-form-urlencoded。它的意思是：“这是已编码为URL参数的表单数据。”

如果你想要发送文件，你需要额外的三个步骤：

• 将method属性设置为POST，因为文件内容不能放入URL参数中。
• 将enctype的值设置为multipart/form-data，因为数据将被分成多个部分，每个文件单独占用一个部分，表单正文中包含的文本数据（如果文本也输入到表单中）占用一个部分。
• 包含一个或多个File picker小部件，允许用户选择将要上传的文件。

例如：

<form method="post" enctype="multipart/form-data">
  <div>
    <label for="file">Choose a file</label>
    <input type="file" id="file" name="myFile">
  </div>
  <div>
    <button>Send the file</button>
  </div>
</form>

4. 常见的安全问题

每次向服务器发送数据时，都需要考虑安全性。到目前为止，HTML表单是最常见的攻击路径(可能发生攻击的地方)。这些问题从来都不是来自HTML表单本身，它们来自于服务器如何处理数据。

根据你所做的事情，你会遇到一些非常有名的安全问题：

a. XSS 和 CSRF

跨站脚本(XSS)和跨站点请求伪造(CSRF)是常见的攻击类型，它们发生在当您将用户发送的数据显示给这个用户或另一个用户时。

XSS允许攻击者将客户端脚本注入到其他用户查看的Web页面中。攻击者可以使用跨站点脚本攻击的漏洞来绕过诸如同源策略之类的访问控制。这些攻击的影响可能从一个小麻烦到一个重大的安全风险。

CSRF攻击类似于XSS攻击，因为它们以相同的方式开始攻击——向Web页面中注入客户端脚本——但它们的目标是不同的。CSRF攻击者试图将权限升级到特权用户(比如站点管理员)的级别，以执行他们不应该执行的操作(例如，将数据发送给一个不受信任的用户)。

XSS攻击利用用户对web站点的信任，而CSRF攻击则利用网站对其用户的信任。

为了防止这些攻击，您应该始终检查用户发送给服务器的数据(如果需要显示)，尽量不要显示用户提供的HTML内容。相反，您应该对用户提供的数据进行处理，这样您就不会逐字地显示它。当今市场上几乎所有的框架都实现了一个最小的过滤器，它可以从任何用户发送的数据中删除HTML<script>、<iframe> 和<object> 元素。这有助于降低风险，但并不一定会消除风险。

b. SQL注入

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

其后果可能是可怕的，从数据丢失到通过使用特权升级控制整个网站基础设施的攻击。这是一个非常严重的威胁，您永远不应该存储用户发送的数据，而不执行一些清理工作(例如，在php/mysql基础设施上使用mysql_real_escape_string()。

c. HTTP数据头注入和电子邮件注入

这种类型的攻击出现在当您的应用程序基于表单上用户的数据输入构建HTTP头部或电子邮件时。这些不会直接损害您的服务器或影响您的用户，但它们会引发一个更深入的问题，例如会话劫持或网络钓鱼攻击。

这些攻击大多是无声的，并且可以将您的服务器变成僵尸。

5. target属性

指定目标显示位置.

form中的target属性，比如提交后将反馈结果在新标签页反馈出来

6. autocomplete属性

关于浏览器会记住表单中关于账号一栏的信息

其实是浏览器自动匹配获取form元素中name属性的功能

可以通过form元素中autocomplete属性（默认为on)去关闭

参考

创建我的第一个表单

HTML 表单