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

一、html表单

1、什么是表单

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

2、作用

用于收集已收集的信息,提交你网站的后台(或者服务器)。
HTML表单是一个包含表单元素的区域,表单元素是允许用户在表单中(表单元素包含如:文本域、下拉列表、单选框、复选框等)输入信息的元素


二、写表单

1、表单提交原理

一般表单有登录名、密码,

,表单所有信息用
包裹。用
包裹所有输入框,当点击提交后,将会把所包裹得所有输入框的信息提交给后台的一个地址上。

2、写表单

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


B、

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

(2)demo:




    
    Document


  


(3)html文件用浏览器打开页面
当写出登录名、密码、提交代码后(之后加上性别),


浅谈HTML表单(一):表单提交原理_第1张图片
image

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

注:点击提交代表向服务器发送了一个请求,这个文件是通过get方式进行表单收集


浅谈HTML表单(一):表单提交原理_第2张图片
image

假如,将以下代码放置在

标签之外,

.....

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


浅谈HTML表单(一):表单提交原理_第3张图片
image

3、终端上操作

即本地终端开启服务器,以服务端的方式打开页面
(1)命令行开启静态服务器,并打开页面:
因为之前我已经安装nodejs,用npm安装了http-server这个服务器,所以可以执行以下代码直接打开这个静态服务器:

$ http-server

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


浅谈HTML表单(一):表单提交原理_第4张图片
image

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

假如有人之前没安装nodejs,就不能用npm命令去开启一个静态服务器,所以可以先看看我这篇:
​浅谈命令行(二):安装静态服务器(涉及nodejs和npm的使用)

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

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

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

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


浅谈HTML表单(一):表单提交原理_第5张图片
image

(3)页面右键——检查,重新输入表单信息,点击提交
出现页面相对应的html文件——form.html的请求,先贴上我操作后出现的页面:


浅谈HTML表单(一):表单提交原理_第6张图片
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:

浅谈HTML表单(一):表单提交原理_第7张图片
image

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

B、post请求
关于post类型发送请求:由于我的服务器http-server,是个静态文件服务器,不支持post请求。
可以看老司机的演示:


浅谈HTML表单(一):表单提交原理_第8张图片
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 表单元素

你可能感兴趣的:(浅谈HTML表单(一):表单提交原理)