html提交表单原理,浅谈HTML表单(一):表单提交原理

66b52468c121889b900d4956032f1009.png

8种机械键盘轴体对比

本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选?

1、什么是表单

能够去输入用户信息的一个单子。和我们平时填写的纸质表单一样,在HTML页面上,也有表单是用于搜集不同类型的用户信息输入

2、作用

用于收集已收集的信息,提交你网站的后台(或者服务器)。

HTML表单是一个包含表单元素的区域,表单元素是允许用户在表单中(表单元素包含如:文本域、下拉列表、单选框、复选框等)输入信息的元素

二、写表单

1、表单提交原理

一般表单有登录名、密码,form、input,表单所有信息用form元素包裹。用包裹所有input元素输入框,当点击提交后,将会把form所包裹得所有input输入框的信息提交给后台的一个地址上。

2、写表单

(1)表单内的主要标签属性:

A、

...

B、

action : 把数据提交到后台的地址,如action="/a123",即提交到当前域名下的/a123

method:提交数据的方式

(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文档用浏览器打开页面

当写出登录名、密码、提交代码后(之后加上性别),

fa92b844960f08aeca8e65c5cd874155.png

以get形式点击提交,页面url显示input输入的相应的内容:

208e5371873f69c35461189a8664cdb8.png

假如,将以下代码放置在

标签之外,

1

2

3

4

5

6

7

8

.....

以get形式提交的页面url也不会显示相应的内容:

4785931ac5690c2770d560cc6b705bd7.png

3、终端上操作

即本地终端开启服务器,以服务端的方式打开页面

(1)命令行开启静态服务器,并打开页面:

因为之前我已经安装nodejs,用npm安装了http-server这个服务器,所以可以执行以下代码直接打开这个静态服务器:

1$ http-server

代码执行之后,输入相应的url出现的页面,两步骤之后的示意图:

32d4c9f2940668faeaaef73c0560fabf.png

注:以下情况给没有安装nodejs 的人看的(安装了就可以不看)

假如有人之前没安装nodejs,就不能用npm命令去开启一个静态服务器,所以可以先看看我这篇:

​浅谈命令行(二):安装静态服务器(涉及nodejs和npm的使用)

​看完之后可以下载nodejs,在终端执行以下代码:

​​​​​$ sudo npm install -g http-server

$ http-server

​这样之后就开启了一个静态服务器,就可以用里面的url打开相应的html文档

​(2)输入相应信息之后,出现:

2940e368002ef25ea5ed3bceedfe9fa2.png

​(3)页面右键——检查,重新输入表单信息,点击提交

​出现页面相对应的html文档——form.html的请求,先贴上我操作后出现的页面:

eafd206f33540544184b74f93e680539.png

​- 请求的地址:

​​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:

9f7e33f75ecb0d78b8845c4194c72644.png

​注:username所得的参数是属于input标签中的name属性

​B、post请求

​关于post类型发送请求:由于我的服务器http-server,是个静态文档服务器,不支持post请求。

​可以看老司机的演示:

27b3850840db49bdbb0ae7a91e98e439.png

​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 表单元素

参与评论 您还未登录,请先 登录 后发表或查看评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:深蓝海洋 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值