一、html表单
1、什么是表单
能够去输入用户信息的一个单子。和我们平时填写的纸质表单一样，在HTML页面上，也有表单是用于搜集不同类型的用户信息输入
2、作用
用于收集已收集的信息，提交你网站的后台（或者服务器）。
HTML表单是一个包含表单元素的区域，表单元素是允许用户在表单中（表单元素包含如：文本域、下拉列表、单选框、复选框等）输入信息的元素
二、写表单
1、表单提交原理
一般表单有登录名、密码，<form></form>、<input>，表单所有信息用<form></form>包裹。用<form>包裹所有<input>输入框，当点击提交后，将会把<form>所包裹得所有<input>输入框的信息提交给后台的一个地址上。
2、写表单
（1）表单内的主要标签属性：
A、
<form></form>
B、
<form action="/a123" method="get">
action : 把数据提交到后台的地址，如action="/a123"，即提交到当前域名下的/a123
method：提交数据的方式
（2）demo：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="login">
<form action="/a123" method="get">
<div class="sex">
<input type="text" name="sex1">
</div>
<div class="username">
<input type="text" name="username1">
</div>
<div class="password">
<input type="password" name="password1">
</div>
<div class="submit">
<button>提交</button>
</div>
</form>
</div>
</body>
</html>
（3）html文件用浏览器打开页面
当写出登录名、密码、提交代码后（之后加上性别），
image
以get形式点击提交，页面url显示input输入的相应的内容：
注：点击提交代表向服务器发送了一个请求，这个文件是通过get方式进行表单收集
image
假如，将以下代码放置在<form></form>标签之外，
<div>
<div class="sex">
<input type="text" name="sex1">
</div>
<form>
.....
</form>
</div>
以get形式提交的页面url也不会显示相应的内容：
image
3、终端上操作
即本地终端开启服务器，以服务端的方式打开页面
（1）命令行开启静态服务器，并打开页面：
因为之前我已经安装nodejs，用npm安装了http-server这个服务器，所以可以执行以下代码直接打开这个静态服务器：
$ http-server
代码执行之后，输入相应的url出现的页面，两步骤之后的示意图：
image
注：以下情况给没有安装nodejs 的人看的（安装了就可以不看）
假如有人之前没安装nodejs，就不能用npm命令去开启一个静态服务器，所以可以先看看我这篇：
浅谈命令行（二）：安装静态服务器（涉及nodejs和npm的使用）
看完之后可以下载nodejs，在终端执行以下代码：
$ sudo npm install -g http-server
$ http-server
这样之后就开启了一个静态服务器，就可以用里面的url打开相应的html文件
（2）输入相应信息之后，出现：
image
（3）页面右键——检查，重新输入表单信息，点击提交
出现页面相对应的html文件——form.html的请求，先贴上我操作后出现的页面：
image
- 请求的地址：
Request URL: http://127.0.0.1:8080/a123?username1=wxq393&password1=12345
- 请求的类型：
Request Method: GET
- 请求的参数：
username1: wxq393
password1: 12345
（4）两种请求类型：get和post
A、get请求
即当form.html中method="get"时，页面上点击“提交”时，就会将form.html展现的信息进行组装，以view的形式去组合成这个url地址：```http://127.0.0.1:8080/a123?username1=wxq393&password1=12345，向这个地址发送请求。
get请求，本质上就是url的拼接，把你的参数拼接在一起组成一个新的url:
image
注：username所得的参数是属于input标签中的name属性
B、post请求
关于post类型发送请求：由于我的服务器http-server，是个静态文件服务器，不支持post请求。
可以看老司机的演示：
image
post的请求类型得到的url地址更干净，更安全。
三、post和get的区别
1、method提供两种提交方式：
一种是get方式向后台发送请求，提交数据；另一种是post方式向后台发送请求，提交数据
2、区别
（1）从安全性上，二者表象不同，get把提交的数据url可以看到，会展现在浏览器历史记录中，安全性不好；但是post看不到，安全性好。
（2）从提交数据量上，get最多提交1k数据，浏览器上的url地址框有字符长度限制；post理论上无限制，受服务器限制。
（3）从原理上，get 是拼接 url， post 是放入http 请求体中。
3、应用场景（怎么合理两种方式传递数据？）
注：在实际应用上，get 重在 "得到", post 重在"传递"
即假如向后台查询一篇论文，请求数据，请求为“得到”，用get方式请求数据；向后台“传递”数据，写了文章之后传递至后台，通常是“传递完成”的状态进行提示，用post方式请求数据。
四、表单元素
呐，早说了，w3c是个好东西😂，轻戳：
HTML 表单元素
网友评论