form标签中的button未指明type时默认的类型是什么

form中button未指明type时，默认type为submit
遇到了一个奇怪的现象：一个按钮打开一个Bootstrap模态框，模态框有几个表单字段和两个按钮，两个按钮可以关闭模态框，点击其中一个按钮关闭模态框后页面居然刷新了。仔细检查后发现点击的按钮未指明type，浏览器把按钮type默认为submit了。

写个demo验证下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <form>
      <span>用户名</span>
      <input type="text" name="username" />

      <span>密码</span>
      <input type="text" name="password" />

      <button>提交</button>
      <button>取消</button>
    </form>
  </body>
</html>

点击两个按钮效果以下，表单提交了，要阻止这种行为，在两个button上指明 type="button"

表单提交后清除表单域

function clearForm(formId) {
    const form = document.getElementById(formId);
    const elements = form.elements;

    for (let i = 0, len = elements.length; i < len; ++i) {
        const element = elements[i];
        if (element.hasAttribute('data-clear') && element.getAttribute('data-clear') == '0') continue;

        switch (element.type) {
            case 'password':
            case 'text':
            case 'textarea':
            case 'file':
                element.value = '';
                break;
            case 'radio':
            case 'checkbox':
                element.checked = false;
                break;
            case 'select-one':
            case 'select-multiple':
                element.selectedIndex = -1;
                break;
            default:
                continue;
        }
    }
}
posted @ 2024-12-04 16:51  carol2014  阅读(23)  评论(0)    收藏  举报