form里面的button

意识模糊 2012-12-06 09:00:47



<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自身的设定还是其他原因？高手解答一下，谢谢！

...全文

379 13 打赏收藏转发到动态举报

写回复

用AI写文章

13 条回复

切换为时间正序

请发表友善的回复…

发表回复

xingfuzhuzi1314 2012-12-07

打赏
举报

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

吉普赛的歌社区高级成员 T9 2012-12-07

打赏
举报

引用 8 楼 xzy21com 的回复:

引用 7 楼 z4213489 的回复:其实我不是想知道怎么解决，而是想了解为什么会出现这种情况. 是浏览器行为还是form自身的标准就是这样设定，还是其他的原因，我更想知道的是这些！浏览器制造商规定的，你遵守就是了。总不能怪人家为什么斑马线为什么不用豹纹

对，　哪有那么多十万个为什么……

scscms太阳光 2012-12-07

打赏
举报

引用 7 楼 z4213489 的回复:

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

浏览器制造商规定的，你遵守就是了。总不能怪人家为什么斑马线为什么不用豹纹

意识模糊 2012-12-07

打赏
举报

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

任第一 2012-12-07

打赏
举报

必须顶你个肺。

Yuangyp 2012-12-07

打赏
举报

引用 11 楼 Giberson1 的回复:

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

要用标准

意识模糊 2012-12-07

打赏
举报

多谢各位的指点，谢谢。对这些标准还是不是很了解，还得加强啊！

Giberson1 2012-12-07

打赏
举报

不用用这种不标准的标签用

<input type="button" value="按钮" onclick="">

替换

<button>测试</button>

scscms太阳光 2012-12-06

打赏
举报

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

吉普赛的歌社区高级成员 T9 2012-12-06

打赏
举报

确实，在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>

奇乐二二二 2012-12-06

打赏
举报

引用 2 楼 yenange 的回复:

JavaScript code?1234567891011121314151617<html> <head> <title>测试form</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="htt……

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

吉普赛的歌社区高级成员 T9 2012-12-06

打赏
举报

<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>

楼主在耍我们吧？在页面加载的时候确实有个弹出框，但点击按钮是不可能有什么动作的。

奇乐二二二 2012-12-06

打赏
举报

使用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形式的提交按钮。