在内未设type时默认为submit，是html规范要求；非提交按钮须显式设type="button"；type="submit"触发submit事件并自动提交表单，type="button"仅触发click且不参与表单流程。
没写 type 的 <button></button> 在 <form></form> 里默认是 submit
只要 <button></button> 出现在 <form></form> 标签内部，又没显式写 type 属性，所有现代浏览器（Chrome/Firefox/Safari）都会把它当 type="submit" 处理——这不是 bug，是 HTML 规范强制要求的行为。
常见翻车现象包括：
- 点了“取消”或“清空搜索框”按钮，页面突然刷新
- React 组件里绑了
onClick，但函数根本没执行，控制台也无报错 - SSR 模板中变量未兜底
type，上线后部分页面偶发提交空表单
修复方式极简单：所有非提交用途的按钮，一律显式声明 type="button"。哪怕当前不在 <form></form> 里，也建议提前加，避免后续重构漏改。
type="submit" 和 type="button" 的事件拦截逻辑完全不同
type="submit" 触发的是表单的 submit 事件，不是普通 click；而 type="button" 只触发 click，完全不进表单生命周期。
想阻止提交，必须在 <form></form> 上监听 submit 并调用 event.preventDefault()。只给按钮加 onclick="event.preventDefault()" 是无效的——原生提交早已触发并跳转。
关键区别：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
type="submit"：自动收集同级<form></form>内所有带name的<input>/<select></select>/<textarea></textarea>，按method和action提交；即使action为空，也会刷新页面 -
type="button"：不收集字段、不触发submit或reset事件、不参与表单验证；纯靠 JS 控制，适合模态框开关、搜索清空、AJAX 请求等
type="reset" 不是“清空”，它只还原 HTML 初始值
type="reset" 的行为非常严格：它只把 <input value="张三"> 恢复成 "张三"，把没写 value 的 <input> 变为空字符串。它不管 JS 动态设置的 input.value = "李四"，也不管 React 的 v-model 或 useState 更新的状态。
另外注意：type="reset" 不会触发 change 或 input 事件，依赖这些事件更新 UI 的逻辑完全收不到通知。
非法 type 值（比如 type="click"、type=""）在 <form></form> 内会被浏览器降级为 submit，行为不可控，务必避免。
<button type="button"></button> 是现代项目的默认首选
<button></button> 相比 <input type="button"> 优势明显：
- 支持嵌套任意 HTML，比如
<button type="button"><svg></svg>导出</button>；<input>只能靠value显示纯文本 - 支持
::before/::after伪元素，加图标或状态标记无需额外 DOM；<input>不支持伪元素 - 屏幕阅读器识别更准，尤其含
aria-label或图文组合时
<input type="button"> 唯一现实用途：维护仍需兼容 IE8 或更老版本的遗留系统，且无法重构表单结构。
实际开发中，只要没特殊兼容需求，就用 <button type="button"></button>，别犹豫。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
