formtarget仅对type="submit"和type="image"有效,优先级高于form的target属性,但无法实现异步提交,仅控制响应显示位置。

formtarget 只对 type="submit" 和 type="image" 有效
给 <button type="button"></button> 或 <input type="text"> 加 formtarget,浏览器直接忽略——它只响应三类元素:<input type="submit">、<input type="image">、<button type="submit"></button>。常见错误包括:
-
<button>提交</button>在旧 Safari 中默认降级为type="button",formtarget失效 -
<input type="reset">或<input type="hidden">上设formtarget,无效且无任何提示 - 用
<button type="submit"></button>是首选:样式可控、无障碍支持稳定、语义清晰
formtarget="_blank" 不保证弹新窗口
现代浏览器(Chrome、Safari、Edge)会拦截“非用户手势触发”的 target="_blank" 行为。表单提交虽由点击发起,但以下情况仍可能静默失败:
- 页面加载后自动调用
form.submit()(无真实点击事件) - 提交逻辑藏在
setTimeout、Promise 回调或异步校验之后 - CSP 策略中设置了
popup-src 'none'
控制台出现 Failed to open window 或类似警告时,说明已被拦截。验证方式:打开 DevTools → Console,手动执行 document.querySelector('form').submit(),看是否真弹窗。
formtarget 优先级高于 form 的 target 属性
formtarget 是明确覆盖机制,不是备用选项。即使 <form target="_self"></form> 已设,只要某个按钮带 formtarget="_blank",点击它就一定走新窗口——无需 JS,也不依赖表单全局设置。
- 多按钮场景下可自由组合:
<input type="submit" value="保存草稿" formtarget="_self">静默提交不跳转 -
<button type="submit" formtarget="_blank">预览效果</button>新标签页打开渲染结果 -
<input type="submit" formtarget="pdf-frame" value="导出PDF">必须配合 DOM 中已存在的<iframe name="pdf-frame"></iframe>,且 name 必须完全一致(含大小写、空格)
formtarget 无法实现真正异步,只是跳转目标切换
formtarget 本质是控制响应内容的显示位置,不改变提交方式(仍是同步 full-page navigation),也不影响服务器响应格式或客户端状态保持。
- 它不能阻止页面跳转,也不能保留当前页未保存的编辑内容
- 若需真正异步(如 fetch + preventDefault),必须用 JS 拦截 submit 事件,否则
formtarget与event.preventDefault()冲突 - POST 提交到新窗口后,原页面状态丢失;GET 提交则受 URL 长度限制,且敏感参数暴露
- 涉及条件跳转、错误重试、UI 状态更新等复杂逻辑时,
formtarget能力边界明显,应直接上 fetch + FormData
容易被忽略的是:formtarget 的“新开窗口”行为完全依赖浏览器对 target 的实现,而不同环境(CSP、iframe 嵌套、PWA、WebView)下表现差异极大,不可当作稳定异步方案使用。











