本文推荐 PC 端阅读~本文版权归 “公众号 | 前端一万小时” 所有，未经授权，请勿转载！复制代码
html_03复制代码
1. post 和 get 方式提交数据有什么区别？2. 在 input 里，name 有什么作用？3. label 有什么作用？如何使用？4. radio 如何分组？5. placeholder 属性有什么作用？6. type=hidden 隐藏域有什么作用？举例说明。7. CSRF 攻击是什么？如何防范？8. 网页验证码是干嘛的？是为了解决什么安全问题？9. 常见 web 安全及防护原理？10. 以下哪种写法会导致 checkbox 被勾选: ✅ ✅ ✅ ✅ ❌ 11. 如果想勾选 checkbox，以下哪些是推荐的写法： ❌ ❌ ❌ ✅ 12. 有 4 个 radio，想 id1 和 id2 一组，id3 和 id4 一组，实现单选，以下说法正确的是？（不定项） ✅ id1 和 id2 需要设置相同的 name，id3 和 id4 需要设置相同的 name。 ❌ id1 和 id2 需要设置相同的 value，id3 和 id4 需要设置相同的 value。 ❌ id1 和 id2 需要设置相同的 class，id3 和 id4 需要设置相同的 class。 ❌ id1 和 id2 需要设置相同的 label，id3 和 id4 需要设置相同的 label。13. 关于 post 和 get 的区别，以下说法正确的是？ ✅ get 的语义是“要”数据，post 的语义是“给”数据或者“创建”数据。 ✅ get 把参数拼装成 url，发 get 请求实际上是浏览器请求拼接后的 url。 ❌ get提交的数据没有最大长度限制，post 提交的数据有最大长度限制（和服务端的设置有关）。 ✅ get 提交的数据有最大长度限制，根本原因是浏览器地址栏对输入的 url 有最大长度限制，超过会截断。 ✅ post 相对更“安全”一些，因为 get 请求拼装的 url 会保存在浏览器历史记录，到了服务器之后一般也有保存的请求日志可以直接看到请求参数。 ✅ 从严格的安全意义上讲，只要是 http 的请求，都不安全。https + post 才安全。复制代码
前言： 这一篇我们集中精力攻克一个知识点——表单，这个知识点在工作中用处很广泛，不管是网页还是 APP，只要涉及到“注册”，就会有他的身影，属于必掌握项。
1 “表单”的相关定义
- HTML 表单是一个可以用来输入用户信息的一个单子，它是一个包含“表单元素”的区域。
- “表单元素”是指：允许用户在表单中（比如：文本域、下拉列表、复选框等等）输入信息的元素。
- 对于服务商（网页、APP 等运营者）来说，这个单子可以用来收集不同类型的用户输入。
2 “表单”的实际运用及相关元素注释
- 任务：写出以下图片的 HTML。
HTML表单 复制代码
注释 1：
复制代码
- HTML 表单必须用
<form>…</form>标签来包裹住所有 input 输入框。当你点击“提交”的时候，他就会把这个<form>所包裹的所有 input 里边的信息“提交”给 form 对应的后台地址上（详见：注释 2）。 - 本注释对应的 input 没有被
<form>包裹，因此在“提交”的时候不会把里边填写的信息“提交”给后台。
注释 2：
- 必须用
<form>包裹住所有 input 输入框； action是指“表单”提交处理对应的后台路径；method是指“表单”提交的方法（get 或 post）：
① get
本质上是一个 URL 的拼接，即把所有参数拼接到一起，形成一个新的 URL 。当我们点“提交”这个按钮时，浏览器做了什么事情呢？- 首先，他把这个 input 里，
type=text中的东西拿出来，得到里边的内容，里边的内容就是我们输入的文字、密码等； - 然后，把 input 里的
name拿出来（username/password）； - 最后，username=填写的名字、password=输入的密码等，然后把它拼成一个 URL。（如：
localhost:8080/abc?username=Oliver&password=123456）
② post
URL 不会发生变化，他不像 get 那样 URL会变成参数的拼接然后传输给后台。但用户填写的数据依然会通过浏览器传输给后台（相对 get 来说更加的安全），且较之 get，他的 URL 字符长度不会因为浏览器地址栏字符长度所限制（而 get ，如果参数很多导致字符过长，则会被浏览器截断）。③ 什么时候选 get/post ?
- get ：直译为“得到”，那往往就是向后台要数据的时候用。比如：向后台查论文，查数据。
- post ：直译为“传递”，则往往用于向后台传数据。比如：写了一大篇文章传给后台。
注释 3：
复制代码
用一个 div 来区分出一个“块”，用一个 class 来建立一个“类”（以下同理）。
注释 4：
复制代码
label for是为了给一个 input 输入框前边加上可点击的说明文字；label里边的for和input里边的id连用，是为了：正常情况下，我要在这个输入框里边输入的话，我仅仅点击前边的说明文字是没反应的，我必须要点击这个输入框才能进入可输入模式。而这里的label for和id的连用就可以实现点击输入框前边的输入文字也可以进入输入模式。（注意：有 for 就必须有一个 id）
注释 5：
复制代码
type="text"，这个输入框是用于输入单行文本。我们使用<input>元素来创建一些不同的控件，type 属性确定了这是什么类型的控件；name="username"，绝大多数表单元素都需要一个名字，相当于用户输入数据的一个标识符。后台服务器脚本将使用这个元素名，并提取里边的参数（见：注释 2，表单是怎样提交给后台的）；value="Oliver"，这里我输入例如一个初始值——Oliver，我们可以输入或不输入任何初始文本（例如：value=""）。
注释 6：
复制代码
type="password"，这个输入框是用于输入密码；placeholder="输入密码"，这个属性用阴影文字来引导用户在框里“输入密码”。
注释 7：
男 女复制代码
单纯用了 label ，里边没有 for ，与之对应的 input 里边也没有 id 。因为这个 input 是“单选框”类型，没有必要点击文字（性别）就选择或输入。
注释 8：
男 女复制代码
type="radio"，这个是“单选钮输入”，用于单选；- name 都是 sex ，我们单选提交后，后台脚本在提取各个 name 的参数时，就会对应的 sex=男/女 ；
……value="男" checked>男……value="女">女复制代码
因为是勾选，没有在输入框输入东西，如果没有 value 值，那么用户只勾选后提交，我们后台是没有东西的。所以，必须手动添加 value 值，让勾选后，后台可以显示对应勾选的 value 值；
- checked 是指这里默认先勾选上。
注释 9：
读书 旅游 室内设计复制代码
type="checkbox"，这个是“复选框”，用于多选；- 同理
type="radio"，name 都是 hobby ； - 同理由于都是勾选，因此手动添加 value 值。
注释 10：
复制代码
- textarea ，这个是多行文本输入，区别于单行文本输入
type="text"； - 由于
<textarea>是一个闭合的标签，因此初始值（是个好人）要写在标签里。
注释 11：
复制代码
type="file"，这个是用于文件上传，如上传身份信息等；accept="image/png"，accept 属性可以用来约束上传文件的格式，例如这里只能上传 image/png （但实际工作中，我们前端这样单方面的限制是不靠谱的，还需要后端也做相应的限制）。
注释 12、注释 13：
复制代码
- 这个写法就不再是 input 了，而是 select 和 option 的结合；
- 这个是用于“在下拉菜单中选择”；
- 这里的 value 值的手动添加也同理于
type="radio"和type="checkbox"中的 value； - selected 可以用来“预勾选”。
注释 14、15、16：
复制代码
type="submit"、type="reset"、type="button"都是可以点击的按钮;- 有 value 值或没有 value 值得区别主要在于：这个按钮上是否有与 value 对应的相关文字。
注释 17：
复制代码
-
这一组代码在页面显示上没有任何效果，但点完“提交”后，这组代码里边的相关参数是会提交给后台的；
-
这组代码的作用：
- 暂存一些信息。比如在
<input type="hidden" name="_" value="_">里边埋了一个值，下次我们要用的时候，就直接可以定位到这个元素去获取它的值，获取到后就可以用了，但用户什么都不知道； - 由于可以暂存信息，那么在使用一些安全策略时，可以用到这个功能—— csrf 攻击。
- 暂存一些信息。比如在
先复习相关文章：。
比如打开一个页面，实际这个页面是写好的模板，然后后端往里边填充数据，填充好后让你看得到。
换句话说，这个页面是后端处理后得到的页面。那假如说，后端在渲染这个页面给我们时（返回给浏览器之前），他就通过这种方式在这里加上这个值—— <input type="hidden" name="csrf" value="123456oliver"> ，他把这个东西写好后发给你，发给你之后，你看到的页面表面上没什么特别的变化，可实际上有一个点已经埋下了—— name="csrf" value="123456oliver" 。
接下来，用户该干什么还是继续干，填写用户名、密码等，填写完后点击“提交”。当用户点击“提交”按钮的时候，用户所填写的所有信息都会提交给后台，同时会提交 <input type="hidden" name="csrf" value="123456oliver"> 里的这个值：csrf=123456oliver 。
提交给后台后，后台就可以做个“校验”，看看这个值对不对，如果这个值是对的，那你用户的提交是安全的。
假如说没有这样一个参数、接口，那任何人都可以伪造一个这样的页面。比如说他知道我们的请求地址（ action 的值），就可以用 method 发送一个 get/post 请求，把所有的参数都发进去，那就相当于修改了数据库。
但如果我们有这个值—— csrf=123456oliver ，而他没有这样一个值，或得到的值是错的，那他即使发送了这些数据，服务器也是不认可的。
只有当他发的这个值是对的，才能说明他有这个权限，表示他是一个合法的用户。这样就可以阻止 csrf 攻击。
当然，csrf 攻击这个东西还涉及到 cookie 的校验等，后续再作相关的文章讲解。后记： 知识点很多、很杂，但静下心来，用两个显示器，一边把本文代码拷贝放到 JS Bin 里边运行，一边对着本文的注释一行行把代码理顺，最后会发现不过如此。前端的学习更多的是耐力的考验，有兴趣固然重要，但不付诸时间和耐力是不行的。
加油！