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