表单自动提交的总结

如需转载请注明出处。
 

以下结论都已经过测试。

 

以下是输入框获得焦点之后,点击回车的表单提交情况测试

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时会自动提交表单。

 

 

posted @ 2011-11-15 11:44  hyven  阅读(5505)  评论(0编辑  收藏  举报