不写type的button在form内默认为submit，会触发表单提交并刷新页面；必须显式声明type="button"、type="submit"或type="reset"以避免意外行为。
不写 type 的 <button> 在表单里默认就是 submit，点一下就刷新页面——这是最常被忽略、也最难排查的坑。
为什么没写 type 的 button 总在偷偷提交
只要 <button> 在 <form> 标签内部，且没显式声明 type 属性，Chrome/Firefox/Safari 都会按规范把它当 type="submit" 处理。这不是 bug，是 HTML 标准行为。
常见现象包括：
- JS 的
onclick或addEventListener('click', ...)看似没执行，其实是因为原生submit事件已先触发并跳转 - React/Vue 组件里只绑了
@click或onClick，但父级<form>没加onSubmit拦截，结果页面白屏或跳转 - SSR 模板中按钮变量未兜底
type，上线后部分页面意外刷新
修复方式极简单：所有非提交用途的按钮，统一写 <button type="button">。哪怕它当前不在 <form> 里，也建议提前加上——避免后续重构漏改。
立即学习“前端免费学习笔记（深入）”；
submit、reset、button 三者的本质区别
它们不是“样式开关”，而是直接决定是否进入表单生命周期的语义开关：
-
type="submit"：触发form的submit事件，自动收集同级表单内所有带name的控件值，按method和action提交；即使action为空，也会刷新页面 -
type="reset"：只还原 HTML 初始值（比如<input value="张三">会变回"张三"），不还原 JS 动态设置的input.value = "李四"，也不触发change或input事件 -
type="button"：完全不参与表单链路，不收集字段、不触发验证、不响应submit或reset，纯靠 JS 控制，适合清空搜索框、打开模态框、发起 AJAX 请求等
非法 type 值（如 type="click"、type=""）在 <form> 内会被浏览器降级为 submit，行为不可控。
<button> 和 <input type="button"> 怎么选
现代项目中，<button type="button"> 是默认首选，<input type="button"> 几乎没有合理使用场景：
-
<button>支持嵌套任意 HTML：<button type="button"><svg></svg> 导出</button>；<input>只能靠value显示纯文本 -
<button>支持::before/::after伪元素，加图标或状态标记无需额外 DOM；<input>不支持伪元素 -
<button>在屏幕阅读器中识别更准，尤其含aria-label或图文组合时 -
<input type="button">唯一现实用途：维护仍需兼容 IE8 或更老版本的遗留系统，且无法重构表单结构
注意：form 属性能让 <button type="submit"> 关联外部表单（如 <button type="submit" form="userForm">），但对 type="button" 无效。
CSS 和 JS 绑定的硬性前提
样式失效、事件不响应，往往不是逻辑问题，而是基础配置没做全：
- CSS 必须加
appearance: none;（含-webkit-appearance和-moz-appearance），否则 iOS 按钮圆角/阴影无法覆盖 - 务必重置
border: none;和padding，不同浏览器默认内边距差异极大 - JS 必须用
addEventListener('click', handler)，禁用onclick=""内联写法——CSP 严格模式下会被拦截 - 动态插入的按钮，得在插入后立刻绑定，或用事件委托到稳定父容器上
真正容易被忽略的，是 SSR 渲染时漏掉 type 属性，或者在模板变量未设默认值的情况下，把按钮生成成了裸 <button>。这种问题上线后才暴露，调试成本远高于写时多敲几个字符。
