HTML表单普通按钮与提交按钮的区别？使用场景解析

type="button"不触发表单提交，type="submit"会自动提交所属form；submit按钮默认行为会干扰JS验证，需preventDefault()或onsubmit返回false拦截；enter键仅触发首个submit按钮；button比input更灵活且支持HTML内容；未声明type的button默认为submit，存在风险。

type="button" 不触发表单提交，type="submit" 会自动提交所属 <form> ——这是最根本的区别，不是“能不能”，而是“默认会不会”。

submit 按钮的默认行为会干扰 JS 验证

如果你在 <form> 里放了 <button type="submit"> 或 <input type="submit">，又同时绑了 onclick 做表单校验，不加干预就会出现：校验通过后提交一次，校验失败也照样提交一次（因为默认行为没被阻止）。

1. 必须显式调用 event.preventDefault() 才能拦住它
2. 或者在 onsubmit 事件处理器里返回 false（注意：只对 form 元素有效）
3. 更稳妥的做法是改用 type="button"，把提交逻辑完全交给 JS 控制

enter 键触发的是 submit，不是 button

用户在文本框中按回车时，浏览器会自动点击当前 <form> 内第一个 type="submit" 按钮。这个行为和你有没有写 onclick 无关，也和按钮是否可见无关。

1. type="button" 完全不会响应 enter 键
2. 如果页面需要支持键盘提交，就不能只靠 type="button"
3. 多个 type="submit" 按钮共存时，enter 键只触发第一个，无法指定

button[type="submit"] 比 input[type="submit"] 更灵活

<button type="submit"> 是现代推荐写法，<input type="submit"> 已逐渐被替代。

1. <button> 支持内嵌 HTML（比如图标、<span>、加载状态文案），<input> 只能靠 value 显示纯文本
2. <button> 的样式控制更直接（伪元素、子元素、宽高继承等）
3. IE8 及更早版本中，<button> 的 type 默认是 "button" 而非 "submit"，需显式声明

什么时候该用 type="button"？

当按钮功能与“提交整张表单”无关时，就该用 type="button" ——哪怕它最终也调用了 form.submit()。

1. 表单内“添加一行字段”“删除某条数据”这类操作
2. 带 loading 状态的提交按钮（避免重复点击）
3. 切换表单模式（如“编辑 → 预览 → 提交”）
4. 调用 fetch() 发送局部数据，不刷新页面

容易被忽略的一点：type 属性不写，默认就是 "submit"（仅限 <button> 标签），所以不声明 type 的 <button> 在表单里是危险的。