一. post和get方式提交数据的区别

安全性：get提交的数据url可以看得到，post看不到，并且get提交的数据会在浏览器的记录中，安全性不好
提交原理：get是以key=value的形式拼接到url中，post讲数据放入http请求体中
数据量：get提交的数据受浏览器限制，url不可能拼接无限长，post理论上无限制，受服务器限制
使用场景：get 重在 "要"数据,get得到的数据可以暂时缓存起来, post 重在"给"数据

二.form表单中的常用标签及其属性

1.form标签

<form action="" method="" target="_target" enctype=""></form>

说明：
action:表单提交的地址
method：提交表单的方法，常见的有post，get，（不支持put，patch，delete）
target：在何处打开url，例如_target为在新页面打开提交的地址
enctype:加密类型，有application/x-www-form-urlencoded ，text/plain ，multipart/form-data

2.input标签-text类型

<label for="username">用户名：</label>
<input type="text" placeholder="username" name="username" value="林克">

说明：
<label>标签的作用：扩大选择范围，鼠标点击用户名三个字也可以将输入框变成focus状态
placeholder：在输入框中显示一个提示，没有其他作用
name: 提交数据时，标识该文本框的key
value：提交数据时，标识该文本框的默认value，修改后value会变成输入的数据

3.input标签-submit类型

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

说明：
该标签会显示一个按钮，点击会提交该标签所在form表单下的数据，value为该按钮上显示的字
注： <button>提交</button>和该标签效果一样，点击会提交；而<input type="button" value="提交">点击不会有提交效果

4.input标签-radio(单选框)，checkbox（复选框）类型

<input type="radio" name="sex" value="boy" checked>
<input type="radio" name="sex" value="girl">
<input type="checkbox" name="hobby" value="篮球" checked>
<input type="checkbox" name="hobby" value="足球">

说明：
name相同的radio即为一组，一组内的单选框只能选择一个
checked：表示默认选择的单选框

5.其他input标签类型

    <input type="date">                             <!--日历-->
    <input type="file" accept="img/png">            <!--选择文件，accept设置只能接受该文件类型-->
    <input type="number">                           <!--只能输入数字-->
    <input type="search">                           <!--输入完内容，回车即可提交-->
    <input type="email">                            <!--只有输入的文本为email形式才能提交-->
    <input type="url">                              <!--只有输入的文本为url形式才能提交-->
    <input type="range">                            <!--范围选择条-->
    <input type="color">                            <!--选择颜色-->
    <input type="reset" value="重置">               <!--重置表单中的所有内容为初始默认值-->
    <input type="hidden" name="csrf" value="66666"> <!--为了解决CSRF安全问题,详见三.补充-->

6.select标签

<select name="addr">
    <option value="shanghai">上海</option>
    <option value="shanghai">北京</option>
    <option value="shanghai" selected>南京</option>
</select>

说明：
name：选择列表的提交的key，value:选择列表提交的value
option：代表选择列表的每一项
上海，北京，南京：选择列表每一项显示的内容
selected：默认选中的选择列表项

7.textare标签

<textare name="comment"> 
此处可以输入多行内容
</textare>

三.补充

1.语义化HTML5标签

选择合适的标签、使用合理的代码结构，便于开发者和视觉障碍人士阅读，同时让浏览器的爬虫和机器很好地解析。

<header>:页头
<nav>:导航栏
<main>:主内容，后面一般接 <article>,<section>,<div>
<aside>:侧边栏
<footer>:页尾

2.CSRF 攻击是什么？如何防范?

中文名：跨站请求伪造。其原理是攻击者构造网站后台某个功能接口的请求地址，诱导用户去点击或者用特殊方法让该请求地址自动加载。用户在登录状态下这个请求被服务端接收后会被误以为是用户合法的操作。对于 GET 形式的接口地址可轻易被攻击，对于 POST 形式的接口地址也不是百分百安全，攻击者可诱导用户进入带 Form 表单可用POST方式提交参数的页面。
防范：
服务端在收到路由请求时，生成一个随机数，在渲染请求页面时把随机数埋入页面（一般埋入 form 表单内，）
1.服务端设置setCookie，把该随机数作为cookie或者session种入用户浏览器
2.当用户发送 GET 或者 POST 请求时带上_csrf_token参数（对于 Form 表单直接提交即可，因为会自动把当3.前表单内所有的 input 提交给后台，包括_csrf_token）
4.后台在接受到请求后解析请求的cookie获取_csrf_token的值，然后和用户请求提交的_csrf_token做个比较，如果相等表示请求是合法的。

HTML-form表单学习笔记