在内未显式声明type时默认为submit，会触发表单提交并刷新页面；type="button"完全静默仅响应click；type="reset"仅还原html初始值，不作用于js动态值。
在HTML中，button元素的提交行为取决于它的 type 属性，而不是标签名本身。默认情况下，<button></button> 的 type 是 submit，但若未显式声明，容易引发意外表单提交，尤其在复杂页面中。
button 的三种 type 值及作用
submit：点击时触发表单提交（即触发 <form></form> 的 submit 事件），这是默认值；
button：纯点击按钮，无默认行为，需配合 JavaScript 手动绑定逻辑；
reset：点击时重置表单内所有可重置控件（如 input、select）为初始值。
为什么必须显式声明 type
浏览器兼容性与团队协作中，依赖默认值易出错。例如：
- 在模态框或工具栏中放一个
<button>确定</button>，若没写type="button"，它可能意外提交外层表单； - 某些前端框架（如 Vue/React）生成的 button 会继承父级 form 上下文，隐式 submit 更难排查；
- 可访问性工具和屏幕阅读器也依赖明确的 type 值来正确播报按钮功能。
常见误用与修复建议
典型问题包括：
— 把操作按钮（如“删除”“展开”）写成无 type 的 button，导致刷新或跳转；
— 在非表单区域嵌套 button，却未意识到它仍可能向上冒泡触发最近的 form 提交。
- 所有非提交用途的 button，一律写
type="button"； - 提交按钮建议同时加
form="form-id"明确归属（尤其当 button 在 form 外时）； - 用 CSS 或 JS 禁用 submit 按钮时，优先用
disabled属性而非仅视觉隐藏，避免误触。
与 input[type="submit"] 的区别
<input type="submit"> 功能单一，只用于提交；<button type="submit"></button> 支持更丰富的 HTML 内容（如图标、换行、span 样式），语义更清晰，且 button 的 disabled 状态对样式控制更稳定。
实际开发中，只要 type 明确、语义匹配、行为可控，button 就是更推荐的提交控件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
