HTML表单

post 和 get 方式提交数据有什么区别？

区别有以下五点，如下所示

1. 表象不同，get把提交的数据url可以看到，post看不到
2. 原理不同，get 是拼接 url， post 是放入http 请求体中
3. 提交数据量不同，get最多提交1k数据，浏览器的限制。post理论上无限制，受服务器限制
4. get提交的数据在浏览器历史记录中，安全性不好
5. 场景不同，get 重在 "要", post 重在"给"

stackoverflow http get length

• 注意：服务器应该谨慎地依赖于超过255字节的URI长度，因为一些较老的客户端或代理实现可能不能适当地支持这些长度。
  在MSIE和Safari中最大长度大约2KB，在Opera中大约4KB，在Firefox中大约8KB。因此，我们可以假设8KB是可能的最大长度，而2KB是服务器端可以依赖的更可负担的长度，并且假设整个URL将进入，255字节是最安全的长度。
• 如果在浏览器或服务器中超出了限制，则大多数都会在没有任何警告的情况下截断超出限制的字符。然而，一些服务器可能会发送HTTP 414错误。如果需要发送大数据，那么最好使用POST而不是GET。它的限制要高得多，但是与客户端相比，长度更依赖于所使用的服务器。对于平均水平的服务器，通常高达约2GB是允许的。这在服务器设置中也是可配置的。当超过POST限制时，大多数服务器将显示特定于服务器的错误/异常，通常为HTTP 500错误。

<input type="submit" value="提交">有什么作用？

• 展示一个提交按钮，用户点击之后会转到form表单下的action地址进行提交数据

CSRF攻击(中文名：跨站请求伪造)

• 其原理是攻击者构造网站后台某个功能接口的请求地址，诱导用户去点击或者用特殊方法让该请求地址自动加载。用户在登录状态下这个请求被服务端接收后会被误以为是用户合法的操作。对于 GET 形式的接口地址可轻易被攻击，对于 POST 形式的接口地址也不是百分百安全，攻击者可诱导用户进入带 Form 表单可用POST方式提交参数的页面。
  防范

1. 服务端在收到路由请求时，生成一个随机数，在渲染请求页面时把随机数埋入页面（一般埋入 form 表单内，）
2. 服务端设置setCookie，把该随机数作为cookie或者session种入用户浏览器
3. 当用户发送 GET 或者 POST 请求时带上_csrf_token参数（对于 Form 表单直接提交即可，因为会自动把当前表单内所有的 input 提交给后台，包括_csrf_token）
4. 后台在接受到请求后解析请求的cookie获取_csrf_token的值，然后和用户请求提交的_csrf_token做个比较，如果相等表示请求是合法的。

在input里，name 有什么作用？

• <input> 标签用于在表单建立一个简单的输入框，属于自闭合标签。
• input 标记是放在表单<form></form>之间的，用来在表单中建立一个数据储存域。它的最主要的两个属性是：name属性和type属性
  name属性作用如下

1. 作为可与服务器交互数据的HTML元素的服务器端的标示，比如input、select、textarea、和button等。我们可以在服务器端根据其Name通过Request.Params取得元素提交的值。
2. HTML元素Input type='radio'分组，我们知道radio button控件在同一个分组类，check操作是mutex的，同一时间只能选中一个radio，这个分组就是根据相同的Name属性来实现的。
3. 建立页面中的锚点，我们知道<a href="URL">link</a>是获得一个页面超级链接，如果不用href属性，而改用Name，如：<a name="PageBottom"></a>，我们就获得了一个页面锚点。
4. 作为对象的Identity，如Applet、Object、Embed等元素。比如在Applet对象实例中，我们将使用其Name来引用该对象。
5. 在IMG元素和MAP元素之间关联的时候，如果要定义IMG的热点区域，需要使用其属性usemap，使usemap="#name"(被关联的MAP元素的Name)。
6. 某些特定元素的属性，如attribute，meta和param。例如为Object定义参数<PARAM NAME = "appletParameter" VALUE = "value">或Meta中<META NAME = "Author" CONTENT = "Dave Raggett">。

radio 如何分组？

10.png
10.png

• 这样就会展现出3组单选框选项，

1. 第一组的“男，女”的name是sex,
2. 第二组的“已成年、未成年”的name是age
3. 第二组的“已婚 未婚”的name是marry

placeholder 属性有什么作用？

• 用作提示用户输入信息的占位符

type=hidden隐藏域有什么作用? 举例说明

• HTML中写表单的时候，写入这段代码<input type="hidden" name="#" value="#">意思是在这里增加一个隐藏域。对于用户来说，在页面上隐藏域是不可见的。
  隐藏域的作用

1. 隐藏域的作用是帮助表单收集和发送信息，便于后端处理数据。用户点击提交数据的时候，隐藏域的信息也被一起发送到了后端。
2. 后端接收前端传来的数据，需要确认前端的身份，是本公司的网页传来的数据，而不是其他黑客知道后端地址后传来的假数据。那么就加一个隐藏域，验证value里的值和数据库里name的值是不是对应的。
3. 有时候一个表单里有多个提交按钮，后端怎么知道用户是点击哪个按钮提交过来的呢？这时候我们只要加隐藏域，对每一个按钮起个名字(value值)，后端接收到数据后，检查value值，就能知道是哪个按钮提交的了。
4. 有时候一个网页中有多个form，我们知道多个form是不能同时提交的，但有时这些form确实相互作用，我们就可以在form中添加隐藏域来使它们联系起来。
5. JavaScript不支持全局变量，但有时我们必须用全局变量，我们就可以把值先存在隐藏域里，它的值就不会丢失了。
6. 还有个例子，比如按一个按钮弹出四个小窗口，当点击其中的一个小窗口时其他三个自动关闭．可是IE不支持小窗口相互调用，所以只有在父窗口写个隐藏域，当小窗口看到那个隐藏域的值是close时就自己关掉。

关于表单的一个小demo

代码地址
预览地址

label 有什么作用？如何使用？

Label标签通常是写在表单（form）内，它通常关联一个控件

• for功能：表示这个Lable是为哪个控件服务的，Label标签要绑定了for指定HTML元素的ID或name属性，你点击这个标签的时候，所绑定的元素将获取焦点 ，点击label所包裹内容，自动指向for指定的id或name
• accesskey则定义了访问这个控件的热键( 所设置的快捷键不能与浏览器的快捷键冲突，否则将优先激活浏览器的快捷键)

1. <label for="username">姓名</label><input id="username" type="text" >
2. <label for="username" accesskey＝"N">姓名</label><input id="username" type="text">
   单选钮、复选框都要点击控件才能选中控件，而如果使用<label>标识就可以实现点击文字选取

<input type="checkbox" id="a" value="haha" name="cn">
<label for="a" >hahkhjkha </label>
<input type="checkbox" id="b" value="hehe" name="cm">
<label for="b" >hehtyrytrye </label>