<form>是HTML标签中比较复杂的标签之一，在学习中我注意到它与HTTP协议有关联，所以我做了一些总结。
method="GET"
- 首先新建一个包含form表单的html文件，例如index.html:
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css" type="text/css" media="all">
</head>
<body>
<h2>你好，这是form构造get请求</h2>
<form action="xxx" method="get">
<div>
<input name="username" type="text">
</div>
<div>
<input name="password" type="password">
</div>
<div>
<input type="submit" value="提交">
</div>
</form>
</body>
</html>
- 运行index.html，输入相应内容，点击提交按钮，用开发者工具观察页面发出的请求：
get请求.PNG
通过看当前页面的请求我们可以知道form表单构造的get请求内容：
-
action属性可以设定新页面的请求路径，也就是Request URL中的xxx - Request URL中出现了查询参数：
？username=111&password=abc - 设定input中的
name和value，点击提交时会构造一个新的get请求。
另外，form表单还有一个默认动作，如果<form>里有一个type="submit"的按钮(input/button)，则在任意一个input里按回车就可以提交表单，构造请求。
method="POST"
- 首先新建一个包含form表单的html文件，例如index.html:
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css" type="text/css" media="all">
</head>
<body>
<h2>你好，这是form构造post请求</h2>
<form action="xxx" method="POST">
<div>
<input name="username" type="text">
</div>
<div>
<input name="password" type="password">
</div>
<div>
<input type="submit" value="提交">
</div>
</form>
</body>
</html>
- 运行index.html，输入相应内容，点击提交按钮，用开发者工具观察页面发出的请求：
post请求.PNG
通过看当前页面的请求我们可以看到form表单构造的post请求内容：
- Request URL无查询参数
- 查询参数在消息体内（在chrome里Form Data是请求的第四部分—消息体）
- form的post请求有消息体
form表单GET请求和POST请求的区别
表象上的区别：
- get无消息体
- post一般没有查询参数
- get有URL长度限制。由于get有查询参数，如果get的url超过服务器设置的范围，会得到414错误。
- 安全性。post比get安全。因为构造post请求比get请求难。
个人见解：
get和post只有语义上的区别，get代表获取内容，post代表上传内容。
其实get也可以有消息体，只是由于它是去拿内容，没必要携带自身的信息。post也可以有查询参数（在action属性里加）。get/post都有长度限制，长度限制由服务器设置，可以改写。get和post都不安全，如果要安全，需要用http或者客户端的技术。
