表单按钮误提交：明确button类型，避免预览变成保存
文章编辑页点预览却触发表单提交，可能是按钮类型不明确。本文说明操作按钮与提交按钮的区分，并给出键盘和失败场景验收。
每个按钮都应有明确职责
表单按钮误提交时，先检查button是否位于表单中，以及它的type属性。保存、预览、添加附件和取消操作不是同一种行为，不能依赖浏览器默认值碰巧满足需求。提交按钮明确使用submit，普通界面操作则明确使用button。
为每个动作列出输入、预期结果和是否写入数据。预览应只产生预览内容，取消应按产品约定返回或清空，不应暗中创建记录。按钮文字与真实动作保持一致，避免“确定”在不同页面分别代表保存、发布和删除。
从表单事件统一处理提交
正式提交可在表单层处理，兼顾按钮点击与回车触发。异步请求期间给出状态提示，完成后再更新页面；失败时保留用户内容并允许重试。禁用按钮可以减少误点，却不能代替服务端的权限校验与重复操作防护。
验收逐个点击编辑页中的所有按钮，并测试在不同输入框按回车。确认预览不写入、保存不自动发布、失败不会丢稿，键盘焦点仍清楚。若按钮只有图标，补上可理解的名称。把按钮职责写进页面需求后，再维护共享组件，能够避免新增一个小功能时无意改变整张表单的提交行为。
官方参考
资料核对日期：2026年10月26日。
本文新增价值
文章编辑页点预览却触发表单提交，可能是按钮类型不明确。本文说明操作按钮与提交按钮的区分，并给出键盘和失败场景验收。本文补充适用边界、输入对照与验收方法；操作建议为综合整理，未将官方示例当成本网站实测结果。
文章编辑页点预览却触发表单提交，可能是按钮类型不明确。本文说明操作按钮与提交按钮的区分，并给出键盘和失败场景验收。本文补充适用边界、输入对照与验收方法；操作建议为综合整理，未将官方示例当成本网站实测结果。