form表单action传参数_（03）③ HTML 表单详解 | HTML

最新推荐文章于 2022-02-23 22:04:36 发布

weixin_39915505

最新推荐文章于 2022-02-23 22:04:36 发布

阅读量1.8k

点赞数 1

文章标签： form表单action传参数 form表单post提交参数 form表单通过checkbox html radio和文字对齐 html如何将多个复选框组织成一组 html设置输入框长度

原创：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 里边的 for 和 input 里边的 id 连用，是为了：正常情况下，我要在这个输入框里边输入的话，我仅仅点击前边的说明文字是没反应的，我必须要点击这个输入框才能进入可输入模式。而这里的 label for 和 id 的连用就可以实现点击输入框前边的输入文字也可以进入输入模式。（注意：有 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">

这一组代码在页面显示上没有任何效果，但点完“提交”后，这组代码里边的相关参数是会提交给后台的；
这组代码的作用：

暂存一些信息。比如在 <input type="hidden" name="_" value="_"> 里边埋了一个值，下次我们要用的时候，就直接可以定位到这个元素去获取它的值，获取到后就可以用了，但用户什么都不知道；
由于可以暂存信息，那么在使用一些安全策略时，可以用到这个功能——CSRF 攻击。

先复习相关文章：《老生常谈的从 URL 输入到页面展现背后发生的事》。

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

换句话说，这个页面是后端处理后得到的页面。那假如说，后端在渲染这个页面给我们时（返回给浏览器之前），他就通过这种方式在这里加上这个值—— <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！