先记住这个答案
<button> 的 type 缺省值是 submit。它作为表单提交按钮时，点击会启动原生约束校验，校验通过才进入提交步骤。若只是折叠面板、清除局部筛选或打开弹窗，写明 type="button"，避免组件被放进表单后行为突然改变。
- 表单内按钮默认按
submit处理 - 普通操作写
type="button" reset会重置表单值- 提交前会走浏览器约束校验
取消按钮为什么触发表单校验
设计稿中的“取消”通常只是关闭对话框。若它位于 <form> 内，省略 type 会让浏览器把它当提交按钮，点击后必填字段可能出现错误提示，甚至发送请求。这个问题在组件复用时最隐蔽：按钮在独立页面正常，嵌入表单就出错。
<form action="/profile" method="post">
<label for="nick">昵称</label>
<input id="nick" name="nick" required>
<button type="button" id="cancel">取消</button>
<button type="submit">保存</button>
</form>cancel 只交给脚本处理关闭动作，submit 则走表单原生提交。明确写类型也方便代码审查，不必让读代码的人靠按钮文字猜意图。
提交与重置不是普通点击
type="submit" 可作为表单的提交触发器。浏览器会检查 required、输入类型等约束，随后按表单的 action 和 method 处理；脚本监听 submit 事件也会收到它。type="reset" 会把控件恢复到初始值，通常不适合作为“清空某一个搜索条件”的按钮。
阻止点击事件默认行为虽可避免某次提交，但这让组件使用场景依赖脚本。对于本来就不该提交的按钮，直接写 type="button" 才是语义和行为都一致的做法。
这类事故通常出现在复用组件里：设计系统的 Button 只渲染 <button>，调用方把“取消”“展开详情”放进表单后，它们就变成提交按钮。修组件时可以让非提交用途显式传 type="button"，真正的提交按钮保留 type="submit"，不要在事件处理器里用 preventDefault() 给每个普通按钮补救。这样浏览器的回车提交和无脚本回退仍按正常表单语义工作。
type="reset" 也不等于“清空表单”。它把各控件恢复到页面加载或标记中给出的默认状态：初始勾选的复选框会重新勾选，初始有值的输入框会恢复原值。若产品上的“清除筛选”要把全部条件设为空，通常需要明确地更新状态，而不是把按钮写成 reset 就算完成。表单内的导航按钮、弹窗打开按钮则应明确写 type="button"。
容易答错的地方
- 以为按钮文案决定行为
- 浏览器看
type，不看“取消”“关闭”等文字。省略type的表单按钮仍可能提交。 - 用
type="reset"当取消按钮 - 它会改动表单所有适用控件的当前值，和关闭弹窗是两回事。
面试官还会怎么问？
表单外的按钮也会提交吗？
若通过 form 属性关联某个表单，提交类型按钮仍可触发那个表单。
按回车提交与点击提交按钮一样吗？
浏览器的隐式提交规则会选择合适的默认提交按钮；按钮类型仍影响最终行为。
怎样在 JavaScript 中不导航地处理提交？
监听表单的 submit 事件，在需要自行发送请求时调用 preventDefault()，并保留校验与状态反馈。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。