在内未写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()" 是无效的——原生提交早已触发并跳转。
关键区别:
使用 PptxGenJS 和 Python 解析,将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint(.pptx)演示文稿。
-
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
浏览器对非法 type 值的处理是不可控的:直接当作 type="submit" 处理,导致意外提交。
务必避免以下写法:
<button type="click"></button><button type=""></button>-
<button></button>(在<form></form>内时)
<button type="button"></button> 是现代项目的默认首选——它支持嵌套任意 HTML、伪元素、更好的可访问性,且语义明确。别图省事漏写 type,这个细节一旦漏掉,调试成本远高于敲那几个字符。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










