1、form表单有什么作用？有哪些常用的input标签，分别有什么作用？html5新增了哪些值？

作用：HTML 表单用于接收不同类型的用户输入，用户提交表单时向服务器传输数据，从而实现用户与Web服务器的交互。简单概况为收集信息提交给服务器。

表单需要用form标签包围

<from action="提交到服务器的地址" target="" method="get/post" enctype></from>

提交网址组合形式为：action中的内容 + ？ + name=值 & name=值

常用的input属性标签：

以下四个值都表现为按钮的样式，按钮上的文字用value属性设置
<input type="buttom" value="按钮">    //按钮
<input type="submit" value="提交">    //提交表单数据至表单处理程序的按钮
<input type="image" value="提交" src="" alt="">    //用于展现一个漂亮的按钮，html5中可以给定width\height，现在不建议使用该标签
<input type="reset" value="重置">    //重置

<input type="text">    //单行文本框
<input type="password">    //密码字段，输入显示黑圆点
<input type="radio">    //单选按钮，用name分组
<input type="checkbox" checked>    //多选，checked属性表示默认选中
<input type="hidden" name="设置名字" value="设置其值">    //隐藏域，页面上看不见，但是最后会一起被提交，用于检验网页是否安全
<input type="file" name="" accept=".jpg,.png" multiple>    
//accept定义可接受的文件类型(建议写MIME形式type/subtype，举例image/*,text/*)，multiple表示支持多个文件

MIME Type MDN文档

html5新增属性值：

<input type="number">    //仅可以输入数字，并且可以增加减小
<input type="email" multiple>    //输入框有email格式正则验证，multiple可输入多个地址，用,分割
<input type="color" value="#ffdbb4">    //选择颜色
<input type="url">    //必须输入http://格式
<input type="range" min="4" max="70" step="0.5">    //滑条，默认0-100，可自定义设置，step设置每移动一次的大小

<input type="date(日期)" value="2018-05-03">
<input type="time(时间)" value="03:34">
<input type="datetime-local(日期+时间)">
<input type="week" value="2018-W18">
<input type="month">

其他不能识别的值，会被当作type=text识别

input中其他的属性值

value="默认显示的内容"
disabled    //该input被禁用
require    //该input必须被填写
maxlength=10    
minlength=3    //规定文本框输入的长度
placeholder="提示性文字，一旦输入内容就消失"
autofocus    //自动获得焦点，即页面加载完后光标自动在这个元素内
tabindex=1    //按tab键时跳转的顺序，默认值为-1时不参与排序

name="值"    
//1.用于组成url，提交网址组合形式为：action中的内容 + ？ + name=值 & name=值
//2.在radio和checkbox阵列里，name相同的元素被分在一组里

input文本输入框的一些总结参考文章

2、在input里，name有什么作用？

name 属性规定 input 元素的名称，只有设置了 name 属性的表单元素才能在提交表单时传递它们的值

3、placeholder 属性有什么作用?

placeholder属性能够让你在文本框里默认显示提示信息，一旦你在文本框里输入了什么信息，提示信息就会隐藏。

单行文本框
<input type="text" name="" placeholder="默认显示的文字">

多行文本框
<textarea name="" cols="10" rows="5" >
        默认显示的文本
</textarea>

4、radio(单选)如何分组?

把radio同组的name属性设为相同

<input type="radio" name="sex" value=“man">男
<input type="radio" name="sex" value="woman">女

单选type="radio"，相同的name为一组

1组
<input type="radio" name="sex" value="man" >男
<input type="radio" name="sex" value="woman">女
2组
<input type="radio" name="sex1" value="man" >男
<input type="radio" name="sex1" value="woman">女

多选type="checkbox"
被<label> 标签包围，点击文字部分也可以被选择

<label><input type="checkbox" name="" value="dota">dota</label>
<label><input type="checkbox" name="" value="旅游" checked>旅游</label>
<label><input type="checkbox" name="" value="宠物" checked>宠物</label>

5、form表单中的常见标签

<label>的for属性

<form action="">
    有for的用法
    <label for="oneid">One</label>
    <input onclick type="text" id="oneid">

    不用for的用法
    <label><input type="checkbox">男</label>
</form>

<button>与<input type="button">的区别

<button type="reset/button/submit">Submit</button>
//不写type属性的话，表单中的首个无type的button将会触发表单的提交

<input type="button" name="b" value="lksjdf">

input的button只能在按钮上显示纯文字；
而button标签可以在按钮上显示其它内容比如图片（即嵌套其它标签），文字也可以设置不同颜色等

<select>下拉菜单栏

<select name="" id="">
    <optgroup label="少年"> <!-- optgroup 用于组合选项 -->
        <option value="1-6岁">1-6岁</option>
        <option value="6-12岁" selected>6-12岁</option>
    </optgroup>
    <optgroup label="青年">
        <option value="13-15岁" disabled>13-15岁</option><!-- hidden被禁用 -->
        <option value="16-18岁">16-18岁</option>
    </optgroup>
    <optgroup label="壮年">
        <option value="18-22岁">18-22岁</option>
        <option value="22-38岁">22-38岁</option>
        <option value="22-38岁" hidden>22-38岁</option><!-- hidden被隐藏 -->
    </optgroup>
</select>

<select>

ps:三种标签组optgrounp，hgroup，colgroup

<fieldset>用于把一组input输入域放一起，包含属性disabled，设置后其内的所有输入域都将被禁用，类似optgroup

<fieldset disabled="disabled"><!-- <fieldset> 标签可以将表单内的相关元素分组，相关表单元素周围绘制边框。 -->
    <legend>这里面的全都被disabled属性禁用了</legend><!-- 为 fieldset 元素定义标题（caption） -->
    <input type="text" name="" id="">
    <input type="text" name="" id="">
    <input type="text" name="" id="">
    <input type="text" name="" id="">
</fieldset>

<fieldset>

6、post 和 get 方式的区别？

GET和POST是HTTP请求的两种基本方法：

• POST ： 向指定的资源提交要被处理的数据
• GET ：从指定的资源请求数据

区别：参考资料
最直观的区别就是GET把参数包含在URL中，POST通过request body传递参数。

1. GET后退按钮/刷新无害，POST数据会被重新提交（浏览器应该告知用户数据会被重新提交）。
2. GET书签可收藏，POST为书签不可收藏。
3. GET能被缓存，POST不能缓存 。
4. GET请求只能进行url编码，而POST支持多种编码方式。
5. GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。
6. GET请求在URL中传送的参数是有长度限制的，而POST没有。
7. 对参数的数据类型，GET只接受ASCII字符，而POST没有限制。
8. GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。

9. GET参数通过URL传递，POST放在Request body中。

   
   
   get 和 post

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

作用：隐藏域在页面中对于用户是不可见的，在表单中插入隐藏域的目的在于收集或发送信息，以利于被处理表单的程序所使用。浏览者单击发送按钮发送表单的时候，隐藏域的信息也被一起发送到服务器。
当表单被提交时，隐藏域就会将信息用你设置时定义的名称和值发送到服务器上，可以让服务器知道数据采集的是否正确。参考资料
举例：

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