表单提交小结

最近工作中常遇到需要提交表单的场景，有必要总结一下。

如下代码所示：

<form id="form_id" action="www.qq.com/formTest.cgi" enctype="text/plain" target="_blank"><input type="text" name="text_input" value="text_value"><input type="checkbox" name="checkbox_input" value="checkbox_value"><input type="radio" name="radio_input" value="radio_value"><input type="file" name="file_input"><input type="hidden" name="hidden_input" value="hidden_value"><input type="reset" value="reset"><input type="submit"></form>

首先要设置一下action（服务端接口url），及target（规定在何处打开 action URL，可以理解为表单的post请求需要一个窗口去打开，跟ajax的请求完全不一样，这样看的话，就直到为什么form允许跨域），target默认值是_self，即当前页面；

表单提交的内容，实际就是里面的input，textarea等标签，这里主要总结一下input；

input的类型很多，如上所示，文本(text)，复选框(checkbox)，单选框(radio)，文件(file)以及隐藏内容，表单提交的时候name跟value成为键值对随请求发送给服务端，file的话比较特殊，浏览器会弹出框给用户选择文件；

提交的方式常用有两种，利用type=submit的input按钮，用户点击的时候自动提交，或者使用js，代码如下：

var form = document.getElementById("form_id");form.submit();

表单dom节点自带submit方法，调用即可。

hidden的用法很多，工作中常出现的场景如下：

<form id="form_id" action="www.qq.com/formTest.cgi" enctype="text/plain" target="_blank"><input type="hidden" name="text_input"><input type="hidden" name="checkbox_input"><input type="hidden" name="radio_input"></form><div><input type="text" name="text_input" value="text_value"><input type="checkbox" name="checkbox_input" value="checkbox_value"><input type="radio" name="radio_input" value="radio_value"></div>

因为一些业务的需要，用户看到的是div里面的输入框跟单选复选框等等内容，但实际提交的是form，通过js监听事件等等其他方式，获取到用户输入的value，然后再设置进form里type=hidden的input元素中去，再提交。

前面说到表单target，表单如果在当前页面提交，是会阻塞，将其设成iframe的name值，可以实现异步表单提交，代码如下：

<form id="form_id" action="www.qq.com/formTest.cgi" enctype="text/plain" target="iframe_name"><input type="hidden" name="text_input"></form><iframe id="iframe_id" name="iframe_name"></iframe>

如此，在表单提交的时候，action url就会在iframe中打开，当前页就不会被阻塞，iframe可以设成0宽高来达到隐藏效果。

同时，可以跟后端配合，来实现表单提交后的回调，更详细内容在跨域请求的文章中总结。