默认type为submit是html规范强制要求，未显式声明type的button在form内点击会触发表单提交而非click事件，导致页面刷新或js失效；type="button"才真正静默，仅响应click且不参与表单流程。
不写type的
这是最常被忽略的事实：只要
- React/Vue 组件里只绑了
onClick，但父级套着<form></form>，漏写type="button"就会白屏跳转 - SSR 模板变量未兜底
type，上线后部分页面偶发提交空表单 - 非法值如
type="click"或空字符串type=""在<form></form>内也会被降级为submit，行为不可控
type="submit"触发的是submit事件，不是click事件
type="submit" 按钮点击时，浏览器先触发 form 的 submit 事件，再收集所有带 name 的 <input>/<select></select>/<textarea></textarea>，按 method 和 action 提交；即使 action 为空，也会刷新页面。而 type="button" 只发 click，完全不进表单链路。
- 想阻止提交，必须在
<form></form>上监听submit并调用event.preventDefault()；只给按钮加onclick="event.preventDefault()"是无效的 - Enter 键只触发第一个
type="submit"按钮，type="button"完全不响应回车 -
type="submit"的语义固定：屏幕阅读器读作“提交按钮”，哪怕你绑了 JS 做校验
button[type="submit"]比input[type="submit"]更灵活
<button type="submit"></button> 支持嵌套任意 HTML 内容（比如 <svg></svg> 图标、<strong></strong> 文字），能用伪元素 ::before/::after 加状态标记；<input type="submit"> 只能靠 value 显示纯文本，改文案就得改属性值，没法加样式钩子。
- 现代项目里，只要不兼容 IE8 这种老古董，优先选
<button type="submit"></button> -
formaction、formenctype这类属性只对type="submit"有效，可实现“一表多交”——比如订单页同时支持“存草稿”和“去结算” -
form属性能让按钮关联任意<form id="xxx"></form>，但目标form必须存在，否则提交失败且无提示
type="button"是唯一真正“静默”的按钮
type="button" 不收集字段、不触发 submit 或 reset 事件、不参与表单验证，也不响应 Enter 键。它只响应 click，完全交由 JS 控制，适合模态框开关、搜索清空、局部 AJAX 请求等场景。
- 必须手动绑定事件，否则点击无反应：
onclick="doSomething()"或addEventListener('click', handler) -
form.addEventListener('submit', )对它完全无效 - 哪怕不在
<form></form>里，也建议显式写type="button"，避免后续重构漏改
type="reset" 不是“清空”，而是还原 HTML 初始值**——它只认 <input value="张三"> 里的 "张三"，对 JS 动态设置的 input.value = "李四" 或 React 的 useState 状态完全无视。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
