input[type="button"]与的区别

时间 2019-11-16

标签 input type button 区别繁體版

原文原文链接

<button>标签

浏览器支持

全部主流浏览器都支持<button>标签。

重要事项：若是在HTML表单中使用button元素，不一样的浏览器会提交不一样的值。IE将提交<button>与<button/>之间的文本，而其余浏览器将提交value属性的内容。请在HTML表单中使用input元素来建立按钮。

注意事项

在使用<button>标签时很容易想固然的当成<input type="button">使用，这很容易产生如下几点错误用法：

一、经过$('#customBtn').val()获取<buttonid="customBtn"value="test">按钮</button>value的值

在IE(IE内核)下这样用到得的是值是“按钮”，而不是“test”，非IE下获得的是“test”。参加上面标红的第一句话。

这一点要和<inputtype="button">区分开。

经过这两种方式$('#customBtn').val()，$('#customBtn').attr('value')在不一样浏览器的得到值，以下：

Browser/Value	$('#customBtn').val()	$('#customBtn').attr('value')
Firefox13.0	test	test
Chrome15.0	test	test
Opera11.61	test	test
Safari5.1.4	test	test
IE9.0	按钮	按钮

验证这一点能够在测试下面的代码

<html>
<head>
    <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
    <scripttype="text/javascript"src="jquery-1.4.4.min.js"></script>
    <scripttype="text/javascript">
        $(function(){
            $('#test1').click(function(){
                alert($('#customBtn').attr('value'));
            });
            $('#test2').click(function(){
                alert($('#customBtn').val());
            });
        });
    </script>
</head>
<body>
<buttonid="customBtn"value="test">&#x6309;&#x94AE;</button>
<inputtype="button"id="test1"value="getattr"/>
<inputtype="button"id="test2"value="getval"/>
</body>
</html>

二、无心中把<button>标签放到了<form>标签中，你会发现点击这个button变成了提交，至关于<input type="submit"/>

不要把<button>标签当成<form>中的input元素。

验证这一点能够在测试下面的代码

复制代码

<form action=""><button>button</button><inputtype="submit"value="inputsubmit"/><inputtype="button"value="inputbutton"/></form>