html_03 | HTML——③ HTML 表单详解

时间 2019-11-06

标签 html 表单详解栏目 HTML 繁體版

原文原文链接

本文推荐 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 被勾选:
  ✅ <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，只要涉及到“注册”，就会有他的身影，属于必掌握项。css

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="tour" checked>旅游
        <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：html

<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 。当咱们点“提交”这个按钮时，浏览器作了什么事情呢？web

首先，他把这个 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：bash

<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 （但实际工做中，咱们前端这样单方面的限制是不靠谱的，还须要后端也作相应的限制）。

注释十二、注释 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 能够用来“预勾选”。

注释 1四、1五、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 攻击。

先复习相关文章：《老生常谈的从 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！

1. HTML Form表单详解
2. html-表格和表单（详细讲解）
3. html之表单详谈
4. HTML-表单（很是详细）
5. html中表单标签详解
6. HTML 表单（form）使用详解
7. HTML复习之HTML表单
8. HTML表格基础详解
9. HTML 表单
10. HTML-表单
更多相关文章...
• ASP.NET Web Pages - HTML 表单 - ASP.NET 教程
• ASP.NET Web Forms - HTML 表单 - ASP.NET 教程
• Flink 数据传输及反压详解
• 为了进字节跳动，我精选了29道Java经典算法题，带详细讲解