form标签内使用button建议指定type

最新推荐文章于 2021-04-15 15:15:09 发布

Jalen备忘录

最新推荐文章于 2021-04-15 15:15:09 发布

阅读量325

点赞数

分类专栏： Html

Html 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

原因：

Internet Explorer 的默认类型是 "button"，而其他浏览器中（包括 W3C 规范）的默认值是 "submit"。

当type为submit时，默认向后台请求，导致页面刷新

测试：

以动态添加input输入框为例，一旦去掉type属性会出现问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("button").click(function(){
                var html = "<br><div id=\"son\"><input title=\"\" type=\"text\"></div>";
                $("#parent").append(html);
            });
        });
    </script>
</head>
<body>
    <form action="" method="post">
        <div id="parent">
            <div id="son">
                <input title="" type="text">
            </div>
        </div>
        <br/>
        <!-- 可以将下面的type属性去掉尝试 -->
        <button id="button" type="button">Button</button>
    </form>
</body>
</html>

参考：

1. W3C关于button的介绍：http://www.w3school.com.cn/tags/tag_button.asp