button的type属性仅支持submit、reset、button三个合法值，其他值会按表单内外环境降级处理，不写type时默认行为因浏览器和位置而异，三者语义与功能严格区分且不可互换。
button 的 type 属性只有三个合法值
浏览器只认 type="submit"、type="reset"、type="button" 这三种，其他值（比如 type="click" 或空字符串）会被当作 type="submit" 处理（在表单内）或降级为 type="button"（在表单外），行为不可靠。
不写 type 属性时，不同环境默认值不同：
- 在
<form></form>内部：Chrome/Firefox/Safari 默认是submit，IE 默认是button - 在
<form></form>外部：所有现代浏览器都按button处理 - 不存在默认
reset的情况 —— 不显式写type="reset"就不会重置表单
submit 和 reset 会触发原生表单行为，button 不会
type="submit" 点击后会收集当前 <form></form> 内所有可提交控件（name 非空的 input、select、textarea 等），按 method 和 action 提交；type="reset" 会把所有表单控件还原为初始 value 或空值（注意：不是 defaultValue，而是页面加载时 DOM 中的值）。
type="button" 完全静默，不参与表单生命周期，必须手动绑定 onclick 或 addEventListener('click', ...) 才能干活。
常见翻车点：
- 本想做个纯 JS 按钮，却漏写
type="button"，结果点了就刷新/跳转 - 用
type="reset"清空表单，但某些字段是 JS 动态设置的value，重置后不变（因为没写进初始 HTML） - 在单页应用（SPA）里用
type="submit"却没event.preventDefault()，导致整页 reload
submit/reset/button 在样式和语义上必须区分对待
三者功能截然不同，用户需要一眼识别意图。CSS 属性选择器是最直接的控制方式：
input[type="submit"], button[type="submit"] {
background: #4CAF50;
color: white;
font-weight: bold;
}
input[type="reset"], button[type="reset"] {
background: #FF9800;
color: white;
}
input[type="button"], button[type="button"] {
background: #2196F3;
border: 1px solid #1976D2;
}
关键细节：
-
button[type="submit"]权重是 10，若同时有 class（如.btn），需确保属性选择器不被覆盖，建议写成.btn.btn-submit或提高 specificity -
button可以嵌套 HTML（图标、span），input不行；所以对复杂按钮结构，优先用button - 禁用状态统一处理：
button:disabled, input:disabled，但注意button[type="submit"]:disabled要显式写，否则可能被通用规则漏掉
为什么不要混用 input[type=submit] 和 button[type=submit]
两者都能提交，但底层差异影响维护性：
-
input[type="submit"]是自闭合标签，文字靠value属性，无法加图标、换行、富文本 -
button[type="submit"]是容器标签，内容可任意组合，语义更清晰，样式更可控 -
input提交时会把自身name和value当作表单字段发出去（比如<input name="btn" value="确认">会多传一个btn=确认），而button默认不提交自身值（除非显式写了name） - 部分老项目还残留 IE 兼容逻辑，
input的 focus/outline 行为不如button稳定
实际开发中，只要不用 input 做按钮，就能避开大多数表单交互的隐性坑 —— 尤其是那个“点了就跳转却找不到原因”的问题，八成出在没写 type="button" 上。
