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

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

html5开发form表单提交 html表单提交数据_服务器

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

html5开发form表单提交 html表单提交数据_html提交表单原理_02

假如,将以下代码放置在

标签之外,


1

2

3

4

5

6

7

8



.....



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

html5开发form表单提交 html表单提交数据_html5开发form表单提交_03

3、终端上操作

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

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

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

1$ http-server

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

html5开发form表单提交 html表单提交数据_html_04

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

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

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


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

$ sudo npm install -g http-server

$ http-server

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


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


html5开发form表单提交 html表单提交数据_表单_05


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

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


html5开发form表单提交 html表单提交数据_表单_06


- 请求的地址:

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:


html5开发form表单提交 html表单提交数据_表单_07

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


B、post请求

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

可以看老司机的演示:


html5开发form表单提交 html表单提交数据_html提交表单原理_08

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