form梳理

1、GET

<form action="//baidu.com">
    <div>
      <input type="text" name="username" id="">
    </div>
    <div>
      <input type="password" name="password" id="">
    </div>
    <div>
      <input type="submit" value="提交">
    </div>
  </form>

action就是具体的路径，也可以写成//baidu.com就是放到百度页面上请求，usename在左边，输入的值在右边，中间用&连接，password放在左边，输入的值放在右边。这就是一个GET请求是如何构造的。

在Network里看是这样子的：https://www.baidu.com/?username=xiaoming&password=199910 问号后面的就是查询参数query，query是一个对象，在这个例子里它是{username:xiaoming, password:199910}。

当然这个网址如果在浏览器里是打不开的，如果想要打开，就需要在服务器上针对查询参数做设置，当服务器接收到这些查询参数时，及时地返回一个相应的页面即可。

2、关于input

<input type="submit" value="提交">
<button type="submit"></button>

这两种方式都可以提交，重点在于type是submit即可，如果type不是submit，即使是input也不行。

3、POST

<form action="//baidu.com" method="POST">
    <div>
      <input type="text" name="username" id="">
    </div>
    <div>
      <input type="password" name="password" id="">
    </div>
    <div>
      <input type="submit" value="提交">
    </div>
</form>

这段代码和之前唯一的区别在于增加了一个method是post方法。

post的参数不会出现在query里，而是放到消息体里。

GET和POST的区别?
- get是没有消息体的，post是有的
- post一般是没有查询参数的，但是可以在action设置成有
- get的url长度有限制，当然是人为限制的
安全性，post更安全一些

4、哪些标签可以发GET请求

link
img
script
form

这些发起请求头都有一个referer表示来源，是谁、哪个页面发出的

5、form的一些其它属性

自动填充

<form aciton="/" autocomplete="on/off">
</form>

会自动把以前写过的一些东西给你选

html较验

<form action="//baidu.com">
    <div>
      <input type="text" name="username" id="" required>
    </div>
    <div>
      <input type="password" name="password" id="" required>
    </div>
    <div>
      <input type="submit" value="提交">
    </div>
  </form>

input添加了required就是必须填写项，如果不填写就会有提示。关于input还有不少东西去mdn查。