阅读 808

(Ⅰ)表单定义、GET、POST | ③ HTML 表单详解

原创:itsOli  @前端一万小时

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

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

本文节选自“语雀”私有专栏「前端一万小时 | 从零基础到轻松就业」
复制代码

 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


下一篇我们继续详解剩余的“注释”部分。

祝好,qdywxs ♥ you!

关注下面的标签,发现更多相似文章
评论