formtarget属性允许单个提交按钮(type="submit"或type="image")覆盖表单的target属性,指定响应显示位置;仅对submit类控件生效,合法值为_blank、_self、_parent、_top或已存在的iframe name。

formtarget 能让单个按钮决定表单提交后在哪显示响应
它不是用来控制整个表单的,而是给 <button type="submit"></button> 或 <input type="submit"> 单独指定跳转目标。比如一个表单默认 target="_self",但你想让“预览”按钮在新标签页打开结果,就直接加 formtarget="_blank" —— 它会无视 <form></form> 上的 target,优先生效。
常见错误现象:加了 formtarget 没反应,大概率是因为用了 <button></button> 但没写 type="submit";或者用了 <input type="button">(非 submit),这个不支持 formtarget。
-
formtarget只对type="submit"的<button></button>和<input>有效 - 它覆盖的是
<form></form>的target,不是action或method - 值为
_blank时,浏览器可能拦截弹窗(尤其用户未主动触发时),实际表现取决于 UA 策略
formtarget 和 form 的 target 属性谁说了算?
formtarget 总是赢。只要某个提交控件带了这个属性,它的值就完全取代 <form></form> 的 target,哪怕 <form></form> 写了 target="_top",而按钮写了 formtarget="_blank",点击该按钮就一定在新标签页打开。
使用场景很典型:后台编辑页里,“保存草稿”按钮用 formtarget="_self"(保持当前页),而“发布并预览”按钮用 formtarget="_blank",避免用户离开编辑状态。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML,替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度,HTML 能同时承载排版、表格、SVG 等。
- 不写
formtarget的按钮,走<form></form>的target - 写了但值非法(如
formtarget="xyz"),则回退到<form></form>的target,或默认_self -
<form></form>没设target,所有按钮默认都是_self,除非自己加formtarget
哪些值能用?iframe 场景下要注意什么
合法值只有五个:_blank、_self、_parent、_top、或一个已存在的 <iframe name="xxx"></iframe> 的 name。
HTML5 已废弃 <frameset></frameset>,所以 _parent 和 _top 实际只在嵌套 iframe 场景中还有意义。比如你在某个 <iframe></iframe> 里放表单,想让提交结果在父级页面显示,就得用 formtarget="_parent" —— 但前提是父页面允许跨域加载(否则会被同源策略拦住)。
- 用
framename时,<iframe></iframe>必须已存在且name完全匹配(大小写敏感) - 如果目标
<iframe></iframe>不存在,行为等同于_self(多数浏览器) -
_blank在移动端 Safari 中可能被强制复用已有标签页,而非新开
兼容性和可访问性容易被忽略的点
IE9 及更早版本完全不支持 formtarget,包括 <button></button> 和 <input>。现代浏览器都支持,但要注意:Firefox 会把 _blank 打开的页面默认聚焦,而 Chrome 不一定 —— 这会影响键盘用户的操作流。
更隐蔽的问题是语义缺失:屏幕阅读器不会自动播报“这个按钮会在新窗口打开”,你需要手动加 aria-label 或视觉提示(比如附带「↗」图标)。
- 服务端无法从 HTTP 请求头区分是哪个按钮触发的提交(
formtarget是纯前端行为) - 如果后端逻辑依赖“是否新窗口打开”,得靠额外字段(如隐藏
<input name="intent" value="preview">)来传递意图 - 不要依赖
formtarget="_blank"做权限隔离——它不阻止脚本访问原页面上下文
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










