## form表单 ```html <form action="form_action.asp" method="get"> <p>First name: <input type="text" name="fname" /></p> <p>Last name: <input type="text" name="lname" /></p> <input type="submit" value="Submit" /> </form> ``` 表单用于向服务器传输数据，是基础的html标签，在网页中扮演着重要的角色。它的本质是要发起请求，用于向服务器发送数据。 下面就来讨论form表单的重要知识： **请求类型** get，post两种。 * * * * * **关于提交按钮** ``` <form action="form_action.asp" method="get"> 有提交效果 <input type="submit" value="Submit" /> <button type="submit" value="Submit">Submit</button> 无提交效果 <input type="button" value="Submit" /> <button type="button" value="Submit">submit</button> </form> ``` 如果提交按钮不在form内，那么无效。 >[danger] 注意：请始终为按钮规定 type 属性。Internet Explorer 的默认类型是 "button"，而其他浏览器中（包括 W3C 规范）的默认值是 "submit"。 提交按钮如果有name属性，那么也会是一个数据字段哦。 * * * * * **关于action地址后的查询字段** 如果是get请求，那么会自动忽略掉查询字符串，此时请用 `<input type="hidden" name="id" />` 隐藏域表单埋默认数据。 如果是post请求，则不会忽略查询字符串。 * * * * * **原生表单也能模拟出ajax不刷新提交效果** 利用 `target="framename"`就可以实现往一个内联框架中“请求”，能做到提交正常表单，页面不刷新的效果。 * * * * * **阻止表单提交事件** 原生： jQuery * * * * * **获取表单对象和值** 原生： jQuery： * * * * * **html5 FormData API** 能实现真正的异步上传，和ajax一样的体验。 参考： [Web 前沿——HTML5 Form Data 对象的使用](http://www.cnblogs.com/lhb25/p/html5-formdata-tutorials.html) * * * * * last update：2017-8-18 22:52:54