【HTML】表单form中一单回车就提交的text、一点击就提交的button

先上一段看似很简单HTML代码：

<!doctype html>
<html>
<body>
    <form action="2.html" method="post">
        <input type="submit" value="提交！"/>
        <input type="button" value="不能提交的button!" οnclick="test()"/>
        <button type="button" οnclick="test()">不能提交的button!</button>
        <button οnclick="test()">#能提交的button#</button>
    </form>
    <form action="2.html" method="post">
        <input type="text" />
    </form>
    <input type="text" />
</body>
<script>
    function test(){
        alert("呵呵！");
    }
</script>
</html>

在这段HTML代码中，分两部分，第一部分，在一个表单中设置4个按钮，第一个按钮，自然是无可争议，也是大家最常用的submit按钮，这个按钮学过网页编程都知道是用来提交表单的，但大家知不知道，随后3个按钮，哪个按钮能够提交表单呢？当然，答案在上面的HTML代码中已经写明白了，如果你设置的按钮，要做一些点击的Javascript(jQuery)动作或者完成一个Ajax的话，而不是提交表单的话，请用规范的<input type="button" οnclick="某某javascript函数">的形式，而不是<button>，当然用<button>也是可以的，不过要加上<type="button">否则，像第1个表单的第4个按钮，点击，执行完javascript事件之后会同时提交这个表单的。除非这个button不在任意一个表单内，就仅仅执行javascript动作！这在一个复杂的后端网页编程尤为注意，因为，用循环产生表单的情况下，你有可能将某个button放在form中，没加<type="button">也没注意。

类似的情况，值得一提还有就是常见的不能再常见的文本框<input type="text" />，如果这个文本框，在一个表单内，注意到第2个表单，无须提供提交按钮，直接点一下回车就会如同点击“提交”按钮一样提交这个表单。除非这个文本框<input type="text" />不再任意一个表单之内。

估计也有一部分人不知道这个，上述代码的真实运行情况，如下图所示：

【HTML】表单form中一单回车就提交的text、一点击就提交的button

悦读