(03)③ HTML 表单详解 | HTML

3,885 阅读10分钟
原创:itsOli  @前端一万小时

本文首发于公众号前端一万小时

本文版权归作者所有,未经授权,请勿转载!

本文节选自“语雀”私有付费专栏前端一万小时 | 从零基础到轻松就业

❗️❗️❗️
以下链接为本文最新勘误篇章——《③ HTML 表单详解》


 1. POST 和 GET 方式提交数据有什么区别?
 2. 在 input 里,name 有什么作用?
 3. label 有什么作用?如何使用?
 4. radio 如何分组?
 5. placeholder 属性有什么作用?
 6. type=hidden 隐藏域有什么作用?举例说明。
 7. CSRF 攻击是什么?如何防范?
 8. 网页验证码是干嘛的?是为了解决什么安全问题?
 9. 常见 Web 安全及防护原理?

10. 以下哪种写法会导致 checkbox 被勾选:
  ✅ <input type="checkbox" checked=false ><input type="checkbox" checked=true ><input type="checkbox" checked="" ><input type="checkbox" checked><input type="checkbox" >

11. 如果想勾选 checkbox,以下哪些是推荐的写法:
  ❌ <input type="checkbox" checked=true ><input type="checkbox" checked="true" ><input type="checkbox" checked="checked"><input type="checkbox" checked>

12. 有 4 个 radio,想 id1 和 id2 一组,id3 和 id4 一组,实现单选,以下说法正确的是?(不定项)
    <input  id="id1" type="radio">
    <input  id="id2" type="radio">
    <input  id="id3" type="radio">
    <input  id="id4" type="radio">
  ✅ 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。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>HTML 表单</title>
  <style type="text/css">
    #txa {
      width: 300px;
      height: 200px;
      margin-left: -12px;
    }
  </style>
</head>
<body>
  <div class="login">
    <input type="text" name="sex"> <!-- ❗️注释 1 -->
    <form action="/getinfo" method="get"> <!-- ❗️注释 2 -->
      <div class="username"> <!-- ❗️注释 3 -->
        <label for="username">姓名</label> <!-- ❗️注释 4 -->
        <input id="username"  type="text" name="username" value="Oliver"> <!-- ❗️注释 5 -->

      </div>
      <div class="password">
        <label for="password" >密码</label>

        <input id="password" type="password" name="password" placeholder="输入密码"> <!-- ❗️注释 6 -->

      </div>
      <div class="sex">
        <label>性别</label> <!-- ❗️注释 7 -->
        <input type="radio" name="sex" value="男" checked><!-- ❗️注释 8 -->
        <input type="radio" name="sex" value="女"></div>
      <div class="orientation">
        <label>取向</label>
        <input type="radio" name="orientation" value="男"><input type="radio" name="orientation" value="女" checked></div>
      <div class="hobby">
        <label>爱好</label>
        <input type="checkbox" name="hobby" value="reading" checked>读书 <!-- ❗️注释 9 -->
        <input type="checkbox" name="hobby" value="design" checked>室内设计
      </div>
      <div>
        <label for="txa">评论:</label>
        <textarea id="txa" name="article">是个好人!                                  
        </textarea> <!-- ❗️注释 10 -->
      </div>
      <div class="file">
        <input type="file" name="myfile" accept="image/png"> <!-- ❗️注释 11 -->
      </div>  
      <div class="mycar">
        <label>我的 car</label>
        <select name="mycar"> <!-- ❗️注释 12 -->
          <option value="三菱" selected>三菱</option> <!-- ❗️注释 13 -->
          <option value="奥迪">奥迪</option>
          <option value="MINI">MINI</option>
        </select>
        <input type="submit" value="提交"> <!-- ❗️注释 14 -->
        <input type="button" value="不提交"> <!-- ❗️注释 15 -->
        <input type="reset" value="重置输入"> <!-- ❗️注释 16 -->
        <input type="hidden" name="csrf" value="123456oliver"> <!-- ❗️注释 17 -->
      </div>
    </form>
  </div>
</body>
</html>

注释 1:

<input type="text" name="sex">
  • HTML 表单必须用 <form>…</form> 标签来包裹住所有 input 输入框。当你点击“提交”的时候,他就会把这个 <form> 所包裹的所有 input 里边的信息“提交”给 form 对应的后台地址上(详见:注释 2);

  • 本注释对应的 input 没有被 <form> 包裹,因此在“提交”的时候不会把里边填写的信息“提交”给后台。

注释 2:

 <form action="/getinfo" method="get">
  • 必须用 <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="username">

用一个 div 来区分出一个“块”,用一个 class 来建立一个“类”(以下同理)。

注释 4:

<label for="username">姓名</label> <!-- 注释 4 -->

<input id="username"  type="text" name="username" value="Oliver"> <!-- 注释 5 -->
  • label for 是为了给一个 input 输入框前边加上可点击的说明文字;

  • label 里边的 forinput 里边的 id 连用,是为了:正常情况下,我要在这个输入框里边输入的话,我仅仅点击前边的说明文字是没反应的,我必须要点击这个输入框才能进入可输入模式。而这里的 label forid 的连用就可以实现点击输入框前边的输入文字也可以进入输入模式。(注意:有 for 就必须有一个 id

注释 5:

<label for="username">姓名</label> <!-- 注释 4 -->

<input id="username"  type="text" name="username" value="Oliver"> <!-- 注释 5 -->
  • type="text" ,这个输入框是用于输入单行文本。我们使用 <input> 元素来创建一些不同的控件,type 属性确定了这是什么类型的控件;

  • name="username" ,绝大多数表单元素都需要一个名字,相当于用户输入数据的一个标识符。后台服务器脚本将使用这个元素名,并提取里边的参数(见:注释 2,表单是怎样提交给后台的);

  • value="Oliver" ,这里我输入例如一个初始值——Oliver,我们可以输入或不输入任何初始文本(例如: value="" )。

注释 6:

<div class="password">
  <label for="password">密码</label>

  <input id="password" type="password" name="password" placeholder="输入密码"> <!-- 注释 6 -->

</div>
  • type="password" ,这个输入框是用于输入密码;

  • placeholder="输入密码" ,这个属性用阴影文字来引导用户在框里“输入密码”。

注释 7:

<div class="sex">
  <label>性别</label> <!-- 注释 7 -->
  <input type="radio" name="sex" value="男" checked>男 <!-- 注释 8 --> 
  <input type="radio" name="sex" value="女"></div>

单纯用了 label,里边没有 for,与之对应的 input 里边也没有 id。因为这个 input 是“单选框”类型,没有必要点击文字(性别)就选择或输入。

注释 8:

<div class="sex">
  <label>性别</label>                                   <!-- 注释 7 -->
  <input type="radio" name="sex" value="男" checked>男  <!-- 注释 8 --> 
  <input type="radio" name="sex" value="女"></div>
  • type="radio" ,这个是“单选钮输入”,用于单选;

  • name 都是 sex,我们单选提交后,后台脚本在提取各个 name 的参数时,就会对应的 sex = 男/女;

……value="男" checked>男
……value="女">女

因为是勾选,没有在输入框输入东西,如果没有 value 值,那么用户只勾选后提交,我们后台是没有东西的。所以,必须手动添加 value 值,让勾选后,后台可以显示对应勾选的 value 值;

  • checked 是指这里默认先勾选上。

注释 9:

<div class="hobby">
  <label>爱好</label>
  <input type="checkbox" name="hobby" value="reading" checked>读书 <!-- 注释 9 -->
  <input type="checkbox" name="hobby" value="tour" checked>旅游
  <input type="checkbox" name="hobby" value="design" checked>室内设计
</div>
  • type="checkbox" ,这个是“复选框”,用于多选;

  • 同理 type="radio" ,name 都是 hobby;

  • 同理由于都是勾选,因此手动添加 value 值。

注释 10:

<div>
  <label for="txa">评论:</label>
  <textarea id="txa" name="article">是个好人!                                  
  </textarea> <!-- 注释 10 -->
</div>
  • textarea,这个是多行文本输入,区别于单行文本输入 type="text"

  • 由于 <textarea> 是一个闭合的标签,因此初始值(是个好人)要写在标签里。

注释 11:

<div class="file">
  <input type="file" name="myfile" accept="image/png"> <!-- 注释 11 -->
</div>  
  • type="file" ,这个是用于文件上传,如上传身份信息等;

  • accept="image/png" ,accept 属性可以用来约束上传文件的格式。例如这里只能上传 image/png (但实际工作中,我们前端这样单方面的限制是不靠谱的,还需要后端也做相应的限制)。

注释 12、注释 13:

<div class="mycar">
  <label>我的 car</label>
  <select name="mycar">   
      <option value="三菱" selected>三菱</option> 
      <option value="奥迪">奥迪</option>
      <option value="MINI">MINI</option>
  </select>
  • 这个写法就不再是 input 了,而是 select 和 option 的结合;

  • 这个是用于“在下拉菜单中选择”;

  • 这里的 value 值的手动添加也同理于 type="radio"type="checkbox" 中的 value;

  • selected 可以用来“预勾选”。

注释 14、15、16:

<input type="submit" value="提交"> <!-- 注释 14 -->
<input type="button" value="不提交"> <!-- 注释 15 -->
<input type="reset" value="重置输入"> <!-- 注释 16 -->
  • type="submit"type="reset"type="button" 都是可以点击的按钮;

  • 有 value 值或没有 value 值的区别主要在于:这个按钮上是否有与 value 对应的相关文字。

注释 17:

<input type="hidden" name="csrf" value="123456oliver">
  • 这一组代码在页面显示上没有任何效果,但点完“提交”后,这组代码里边的相关参数是会提交给后台的;

  • 这组代码的作用:

  1. 暂存一些信息。比如在 <input type="hidden" name="_" value="_"> 里边埋了一个值,下次我们要用的时候,就直接可以定位到这个元素去获取它的值,获取到后就可以用了,但用户什么都不知道;

  2. 由于可以暂存信息,那么在使用一些安全策略时,可以用到这个功能——CSRF 攻击。

先复习相关文章:《(01)老生常谈的从 URL 输入到页面展现背后发生的事 | Web 前置知识》

比如打开一个页面,实际这个页面是写好的模板,然后后端往里边填充数据,填充好后让你看得到。

换句话说,这个页面是后端处理后得到的页面。那假如说,后端在渲染这个页面给我们时(返回给浏览器之前),他就通过这种方式在这里加上这个值—— <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 里边运行,一边对着本文的注释一行行把代码理顺,最后会发现不过如此。前端的学习更多的是耐力的考验,有兴趣固然重要,但不付诸时间和耐力是不行的。

祝好,qdywxs ♥ you!