Html中Form提交细节研究

1.        表单提交按钮

当表单中包含有image或者submit类型的按钮时,会将第一个该类型的按钮默认为表单提交按钮,也就是你按回车键就会自动触发的按钮;<input type=submit>或者<input type=image>;如果不含有表单,则不会触发提交表单事件;

2.        文本输入框一个和多个的区别

如果表单中只有一个文本输入框,即使页面中存在表单提交按钮,但回车时,也仅仅触发表单的提交事件:onsubmit,而不会触发表单提交按钮的单击事件:onclick;但当表单中多于两个文本输入框时,在回车后,将会触发第一个表单提交按钮的单击事件:onclick,然后才触发表单的提交事件:onsubmit

3.        验证实例代码如下:

今天下午发现一个很奇怪的问题,看如下两段代码:

代码一:

<form method=post onsubmit=alert(‘form submit’)>

<input type=text><input type=text>

<input type=submit onclick=alert(‘button click’)>

</form>

代码二:

<form method=post onsubmit=alert(‘form submit’)>

<input type=text>

<input type=submit onclick=alert(‘button click’)>

</form>

对于代码一,有两个文本输入框,当焦点位于其中一个输入框时,回车就能够触发表单的提交按钮或者提交事件,但在代码二中,当焦点位于唯一的一个输入框时,回车却不能够触发表单的提交按钮或者事件,因此这个在实际开发中可能会碰到这样的问题;解决办法就是页面中提供两个文本输入框。

原文地址:https://www.cnblogs.com/AndyGe/p/1590359.html