表单自动提交的总结
如需转载请注明出处。
以下结论都已经过测试。
以下是输入框获得焦点之后,点击回车的表单提交情况测试
1.一个表单中只有一个输入框时,会自动提交,有多个输入框时不会自动提交。例如:
1 <form name='frm' action="http://www.baidu.com">
2 <input type="text" name= "userName"/> //唯一的输入框
3 <input type="hidden" name= "userName1"/>
4 </form>
2.表单中含有<input type="submit"/>时,即使有多个输入框,也会自动提交。例如:
1 <form name='frm' action="http://www.baidu.com">
2 <input type="text" name= "userName"/>
3 <input type="text" name= "passWord"/> //多个输入框
4 <input type="submit" value="提交"/>
5 </form>
3.表单中含有<input type="image"/>时,即使有多个输入框,也会自动提交。例如:
1 <form name='frm' action="http://www.baidu.com">
2 <input type="text" name= "userName"/>
3 <input type="text" name= "passWord"/>
4 <input type="image" value="提交"/>
5 </form>
4.表单中含有<input type="button"/>时,不会自动提交。例如:
1 <form name='frm' action="http://www.baidu.com">
2 <input type="text" name= "userName"/>
3 <input type="text" name= "passWord"/>
4 <input type="button" value="提交"/>
5 </form>
5.当有多个表单时,每个表单的提交情况如上面各项,回车会跳转到获取焦点的文本框所对应的表单的action。
以下为按钮点击的表单提交情况测试
1.如果表单内含有<input type="submit"/>,并且指定了其onclick事件,例如:
1 <form id="frm" name="frm" action="http://www.baidu.com">
2 <input type="submit" value="按钮" onclick="Login()"/>
3 </form>
点击按钮时,会先执行Login()事件,再提交表单跳转页面到baidu。
2. 如果表单内含有<input type="image"/>,并且指定了其onclick事件,例如:
1 <form id="frm" name="frm" action="http://www.baidu.com">
2 <input type="image" value="按钮" onclick="Login()"/>
3 </form>
点击按钮时,会先执行Login()事件,再提交表单跳转页面到baidu。
3.如果表单内含有<input type="button"/>,并且指定了其onclick事件,例如:
1 <form id="frm" name="frm" action="http://www.baidu.com">
2 <input type="button" value="按钮" onclick="Login()"/>
3 </form>
点击按钮时,会执行Login()事件,但不会提交表单,没有跳转到baidu。
4.如果表单内含有<button type="submit"></button>,并且指定了其onclick事件,例如:
1 <form id="frm" name="frm" action="http://www.baidu.com">
2 <button type="submit" onclick="Login()">按钮</button>
3 </form>
点击按钮时,会先执行Login()事件,再提交表单跳转页面到baidu。
5.如果表单内含有<button></button>,指定type="button"或者不指定type,并且指定了其onclick事件,例如:
1 <form id="frm" name="frm" action="http://www.baidu.com">
2 <button type="button" onclick="Login()">按钮</button>
3 </form>
点击按钮时,会执行Login()事件,但不会提交表单,没有跳转到baidu。
6.如果表单内含有<button type="reset"></button>,并且指定了其onclick事件,例如:
1 <form id="frm" name="frm" action="http://www.baidu.com">
2 <button type="reset" onclick="Login()">按钮</button>
3 </form>
点击按钮时,会执行Login()事件,但不会提交表单,没有跳转到baidu。
综上所述:a,input标签当type为submit和image时会自动提交表单;b,button标签当type为submit时会自动提交表单。