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  阅读(9)  评论(0编辑  收藏  举报