form表单的若干疑问

---

form表单有什么作用？有哪些常用的input标签，分别有什么作用？

HTML <form>表单用于搜集不同类型的用户输入。
<input> 元素在 <form> 元素中使用，用来声明允许用户输入数据的 input 控件。（根据不同的 type 属性值，输入字段拥有很多种形式。<input type="text">）

常用的<input>有如下几种：

标签	作用
text	默认。定义一个单行的文本字段。（默认宽度为20）
password	定义密码字段。（字符会被遮盖）
checkbox	复选框（checked属性：是否选中）
radio	单选框（name属性：指定多个单选框的在一个区域里进行单选操作）
button	定义普通按钮。常用于与JS一起启动脚本。（value属性：button按钮显示的文本）
reset	定义重置按钮(清除文本区域内容，重置所有表单值为默认值)
submit	定义提交按钮。
hide	定义隐藏输入字段。（存放仅用于自己使用的信息）
file	定义输入字段和 "浏览"按钮，供文件上传。
image	定义图像形式的提交按钮。

参考 Tina_xy:全面剖析 <input> 标签 ------ HTML\HTML5

---

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

1. 安全性不同，get把提交的数据url可以看到，post在页面地址栏中被提交的数据是不可见的；
2. 原理不同，get是拼接 url， post是放入http 请求体中；
3. 提交数据量不同，get 最适合少量数据的提交，浏览器会设定容量限制，但post理论上无限制，受服务器限制；
4. get提交的数据在浏览器历史记录中，安全性不好；
5. 应用场景不同，如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息，且数据量较少时，可以使用get，并且这是form表单的默认提交方法。如果表单正在更新数据，或者包含敏感信息（例如密码）。则post更佳。

---

在input里，name有什么作用？

1. name 属性规定 input 元素的名称。
2. name 属性用于对提交到服务器后的表单数据进行标识，或者在客户端通过JavaScript 引用表单数据。
3. 只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。
4. 在同一组input下，比如type属性为radio或者checkbox，单选复选框时，value值不同，但name一般是一样的，用来表示在一组。

---

radio如何分组？

radio可以通过在input标签中对name属性设置相同的值来实现分组，不同的radio选项通
过赋相同的name值来表示它们是处于同一组的，处于同一组后，即可实现同组radio只能选择一个的单选作用了

---

placeholder属性有什么作用?

placeholder这个单词中文意思是：占位符，占位文本，因此 placeholder="我是占位内容"，用于在文本框中预设相关的文本信息，以提醒用户。当用户在文本框中键入了其他字符，则占位内容自动消失。

---

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

hidden隐藏域也是表单元素之一，它的语法和其他表单元素一样：

<input type="hidden" name="field＿name" value="value"> 

hidden隐藏域无外乎下面六点作用：

1. 隐藏域在页面中对于用户是不可见的，在表单中插入隐藏域的目的在于收集或发送信息，以利于被处理表单的程序所使用。浏览者单击发送按钮发送表单的时候，隐藏域的信息也被一起发送到服务器。
2. 有些时候我们要给用户一信息，让他在提交表单时提交上来以确定用户身份，如sessionkey，等等．当然这些东西也能用cookie实现，但使用隐藏域就简单的多了．而且不会有浏览器不支持，用户禁用cookie的烦恼。
3. 有些时候一个form里有多个提交按钮，怎样使程序能够分清楚到底用户是按那一个按钮提交上来的呢？我们就可以写一个隐藏域，然后在每一个按钮处加上onclick="document.form.command.value="xx""然后我们接到数据后先检查command的值就会知道用户是按的那个按钮提交上来的。
4. 有时候一个网页中有多个form，我们知道多个form是不能同时提交的，但有时这些form确实相互作用，我们就可以在form中添加隐藏域来使它们联系起来。
5. javascript不支持全局变量，但有时我们必须用全局变量，我们就可以把值先存在隐藏域里，它的值就不会丢失了。
6. 还有个例子，比如按一个按钮弹出四个小窗口，当点击其中的一个小窗口时其他三个自动关闭．可是IE不支持小窗口相互调用，所以只有在父窗口写个隐藏域，当小窗口看到那个隐藏域的值是close时就自己关掉。

参考码农教程：html hidden隐藏域作用及用法实例介绍

---

列出你所知道的HTML 5标签

很多新增的，但是有些即使是新增，但是不建议使用，比如很多时候在css里面做定义会更便于后期维护，以下列举一些常用的：

标签	作用
<article>	定义文章
<aside>	定义页面内容之外的内容
<audio>	定义声音内容
<canvas>	定义图形
<header>	定义 section 或 page 的页眉
<footer>	定义 section 或 page 的页脚
<nav>	定义导航链接
<section>	定义 section
<track>	定义用在媒体播放器中的文本轨道
<video>	定义视频
<time>	定义日期/时间

---

CSRF攻击是什么？如何防范？

CSRF (Cross Site Request Forgery)攻击，中文名：跨站请求伪造。

其原理是攻击者构造网站后台某个功能接口的请求地址，诱导用户去点击或者用特殊方法让该请求地址自动加载。

用户在登录状态下这个请求被服务端接收后会被误以为是用户合法的操作。对于 GET 形式的接口地址可轻易被攻击，对于 POST 形式的接口地址也不是百分百安全，攻击者可诱导用户进入带 Form 表单可用POST方式提交参数的页面。

关于防范：

首先用户习惯上，不要浏览一些不安全的网站，轻易点击陌生人发布的链接等。

从网站开发者角度：
尽量少用get，采用anti-csrf-token，服务器收到用户请求后，在页面生成 hidden属性的input表单，埋入预先生成的随机数。同时服务器端进行设置，把该随机数作为cookie或者session写入用户浏览器，最后当用户发送请求时，会自行带上csrf_token参数，当后台收到请求后，就会解析cookie中的csrf_token值，与之前埋入用户页面中的值做对比，相等，即是合法请求，此时，服务器端才能收到正常的请求。

CSRF 是什么？——饥人谷若愚