本文详细介绍了HTML表单的用途、工作原理以及GET和POST请求的区别。通过实例展示了如何创建表单，解释了GET请求将数据暴露在URL中，而POST请求更加安全。还探讨了在实际应用中何时选择GET或POST方法。此外，讨论了表单元素在信息收集中的作用。
8种机械键盘轴体对比
本人程序员，要买一个写代码的键盘，请问红轴和茶轴怎么选？
1、什么是表单
能够去输入用户信息的一个单子。和我们平时填写的纸质表单一样，在HTML页面上，也有表单是用于搜集不同类型的用户信息输入
2、作用
用于收集已收集的信息，提交你网站的后台(或者服务器)。
HTML表单是一个包含表单元素的区域，表单元素是允许用户在表单中(表单元素包含如：文本域、下拉列表、单选框、复选框等)输入信息的元素
二、写表单
1、表单提交原理
一般表单有登录名、密码，form、input，表单所有信息用form元素包裹。用包裹所有input元素输入框，当点击提交后，将会把form所包裹得所有input输入框的信息提交给后台的一个地址上。
2、写表单
(1)表单内的主要标签属性：
A、
...B、
action : 把数据提交到后台的地址，如action="/a123"，即提交到当前域名下的/a123method：提交数据的方式
(2)demo：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
Document提交
(3)html文档用浏览器打开页面
当写出登录名、密码、提交代码后(之后加上性别)，
以get形式点击提交，页面url显示input输入的相应的内容：
假如，将以下代码放置在
标签之外，1
2
3
4
5
6
7
8
.....
以get形式提交的页面url也不会显示相应的内容：
3、终端上操作
即本地终端开启服务器，以服务端的方式打开页面
(1)命令行开启静态服务器，并打开页面：
因为之前我已经安装nodejs，用npm安装了http-server这个服务器，所以可以执行以下代码直接打开这个静态服务器：
1$ http-server
代码执行之后，输入相应的url出现的页面，两步骤之后的示意图：
注：以下情况给没有安装nodejs 的人看的(安装了就可以不看)
假如有人之前没安装nodejs，就不能用npm命令去开启一个静态服务器，所以可以先看看我这篇：
浅谈命令行(二)：安装静态服务器(涉及nodejs和npm的使用)
看完之后可以下载nodejs，在终端执行以下代码：
$ sudo npm install -g http-server
$ http-server
这样之后就开启了一个静态服务器，就可以用里面的url打开相应的html文档
(2)输入相应信息之后，出现：
(3)页面右键——检查，重新输入表单信息，点击提交
出现页面相对应的html文档——form.html的请求，先贴上我操作后出现的页面：
- 请求的地址：
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:
注：username所得的参数是属于input标签中的name属性
B、post请求
关于post类型发送请求：由于我的服务器http-server，是个静态文档服务器，不支持post请求。
可以看老司机的演示：
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 表单元素
扫一扫
1715
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
