form里面的button


<html>
    <head>
        <title>测试form</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript" src="jquery-1.7.2.min.js"></script>        
    </head>
    <body>
        <form>
            <input type="text"></input>
            <input type="text"></input>
            <button>测试</button>
        </form>
        <script type="text/javascript">
            $(document).ready(function(){alert('refurbish');});
        </script>
    </body>    
</html>没有给button绑定任何事件，但是点击button页面还是刷新了，这个是为什么呢？
是from自身的设定还是其他原因？高手解答一下，谢谢！

解决方案 »

  1.   

    使用Firefox依次浏览，就能看到input和button的区别：input提交按钮显示的文字就是value，而button提交按钮显示的文字和value是独立的，从这个意义上来看，button更有表现力，是更值得推荐的提交按钮实现方式。可惜IE总是拖后腿，使用IETester里的IE6，7，8分别浏览，就会发现button提交按钮在IE下有Bug：首先，在IE6里，如果一个表单里有多个button形式的提交按钮，那么不管你点击其中哪个按钮，所有的button按钮都会被提交，而在IE7，8里则点击哪个按钮，才提交哪个button按钮。此时，如果想在服务端判断用户点击了哪个按钮，只能使用Javascript来处理。另外，在IE6，7，8里，button形式的按钮在提交后，value属性都失效了，显示文字取代了value。总结：从理论上来看，button形式的提交按钮优于input形式的提交按钮。但如果考虑浏览器通用性，很多时候还是只能使用input形式的提交按钮。
      

  2.   

    <html>
        <head>
            <title>测试form</title>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js" type="text/javascript"></script>       
        </head>
        <body>
            <form>
                <input type="text"></input>
                <input type="text"></input>
                <button>测试</button>
            </form>
            <script type="text/javascript">
                $(document).ready(function(){alert('refurbish');});
            </script>
        </body>    
    </html>楼主在耍我们吧？
    在页面加载的时候确实有个弹出框， 但点击按钮是不可能有什么动作的。
      

  3.   

    确实提交了，button在form里面也可以提交，不过不同的浏览器下面状态不一样
      

  4.   

    确实， 在firefox 下有提交动作。 楼主还是老老实实用 input 的按钮吧。下面这样就不会有了：
    <html>
        <head>
            <title>测试form</title>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js" type="text/javascript"></script>
            <script type="text/javascript">
                $(document).ready(function(){alert('refurbish');});
            </script>
        </head>
        <body>
            <form>
                <input type="text"/>
                <input type="text"/>
                <input type="button" value="测试" />
            </form>
        </body>    
    </html>
      

  5.   

    注意了：<button>测试</button>没有指定type在firefox默认是提交按钮.所以你只要写成：<button type="button">测试</button>即可通用！
      

  6.   

    其实我不是想知道怎么解决，而是想了解为什么会出现这种情况.
    是浏览器行为还是form自身的标准就是这样设定，还是其他的原因，我更想知道的是这些！
      

  7.   

    强力建议LZ用<input type="button"></input>
    这种浏览器正常来说都是一个规则！
      

  8.   

    不用用这种不标准的标签用<input type="button" value="按钮" onclick="">
    替换
    <button>测试</button>