时间：2023-09-14 22:24:02 | 来源：网站运营
时间：2023-09-14 22:24:02 来源：网站运营
（03）③ HTML 表单详解 | 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 才安全。 上方面试题“参考答案详解”，请点击此处查看获取方式！<!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"><form>…</form> 标签来包裹住所有 input 输入框。当你点击“提交”的时候，他就会把这个 <form> 所包裹的所有 input 里边的信息“提交”给 form 对应的后台地址上（详见：注释 2）；<form> 包裹，因此在“提交”的时候不会把里边填写的信息“提交”给后台。<form action="/getinfo" method="get"><form> 包裹住所有 input 输入框；action 是指“表单”提交处理对应的后台路径；method 是指“表单”提交的方法（GET 或 POST）：type=text 中的东西拿出来，得到里边的内容，里边的内容就是我们输入的文字、密码等；name 拿出来（username/password)；localhost:8080/abc?username=Oliver&password=123456 ）<div class="username">用一个 div 来区分出一个“块”，用一个 class 来建立一个“类”（以下同理）。<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）<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="" ）。<div class="password"> <label for="password">密码</label> <input id="password" type="password" name="password" placeholder="输入密码"> <!-- 注释 6 --></div>type="password" ，这个输入框是用于输入密码；placeholder="输入密码" ，这个属性用阴影文字来引导用户在框里“输入密码”。<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 是“单选框”类型，没有必要点击文字（性别）就选择或输入。<div class="sex"> <label>性别</label> <!-- 注释 7 --> <input type="radio" name="sex" value="男" checked>男 <!-- 注释 8 --> <input type="radio" name="sex" value="女">女</div>type="radio" ，这个是“单选钮输入”，用于单选；……value="男" checked>男……value="女">女因为是勾选，没有在输入框输入东西，如果没有 value 值，那么用户只勾选后提交，我们后台是没有东西的。所以，必须手动添加 value 值，让勾选后，后台可以显示对应勾选的 value 值；<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；<div> <label for="txa">评论：</label> <textarea id="txa" name="article">是个好人！ </textarea> <!-- 注释 10 --></div>type="text" ；<textarea> 是一个闭合的标签，因此初始值（是个好人）要写在标签里。<div class="file"> <input type="file" name="myfile" accept="image/png"> <!-- 注释 11 --></div> type="file" ，这个是用于文件上传，如上传身份信息等；accept="image/png" ，accept 属性可以用来约束上传文件的格式。例如这里只能上传 image/png （但实际工作中，我们前端这样单方面的限制是不靠谱的，还需要后端也做相应的限制）。<div class="mycar"> <label>我的 car</label> <select name="mycar"> <option value="三菱" selected>三菱</option> <option value="奥迪">奥迪</option> <option value="MINI">MINI</option> </select>type="radio" 和 type="checkbox" 中的 value；<input type="submit" value="提交"> <!-- 注释 14 --><input type="button" value="不提交"> <!-- 注释 15 --><input type="reset" value="重置输入"> <!-- 注释 16 -->type="submit" 、 type="reset" 、 type="button" 都是可以点击的按钮；<input type="hidden" name="csrf" value="123456oliver"><input type="hidden" name="_" value="_"> 里边埋了一个值，下次我们要用的时候，就直接可以定位到这个元素去获取它的值，获取到后就可以用了，但用户什么都不知道；<input type="hidden" name="csrf" value="123456oliver"> ，他把这个东西写好后发给你。发给你之后，你看到的页面表面上没什么特别的变化，可实际上有一个点已经埋下了—— name="csrf" value="123456oliver" 。<input type="hidden" name="csrf" value="123456oliver"> 里的这个值：csrf=123456oliver 。csrf=123456oliver ，而他没有这样一个值，或得到的值是错的，那他即使发送了这些数据，服务器也是不认可的。关键词：
