target属性指定表单提交后响应内容的显示位置,常用值包括_self(当前窗口)、_blank(新标签页)、_parent(父级上下文)、_top(顶层窗口)及自定义iframe名称。

target 属性用于指定表单提交后响应内容在哪个浏览上下文中显示,比如新标签页、当前窗口或嵌入的 iframe。它不是表单本身的功能,而是作用于 <form> 标签,配合 method 和 action 一起使用。
target 常用值及效果
target 的值决定提交后页面加载的位置,常见取值有:
-
_self:在当前窗口/标签页中加载(默认行为,可省略) -
_blank:在新标签页(或新窗口)中打开响应结果 -
_parent:在父级浏览上下文中加载(常用于嵌套 frame 或 iframe 场景) -
_top:在整个顶层窗口中加载,会跳出所有 iframe - 自定义名字(如
myFrame):需对应页面中一个<iframe name="myFrame">,响应内容将加载到该 iframe 内
基本用法示例
直接在 <form> 标签中添加 target 属性即可:
<form action="/submit.php" method="post" target="_blank"> <input type="text" name="username" placeholder="用户名"> <button type="submit">提交(新标签页打开)</button> </form>
点击提交后,/submit.php 的返回内容会在新标签页中显示,原页面保持不变。
立即学习“前端免费学习笔记(深入)”;
配合 iframe 实现无刷新局部提交
若希望表单提交后只更新页面某一部分(类似简易 AJAX 效果),可用 target 指向同页中的 iframe:
<iframe name="resultFrame" style="width:100%; height:200px;"></iframe> <form action="/api/login" method="post" target="resultFrame"> <input type="email" name="email" required> <input type="password" name="pwd" required> <button type="submit">登录</button> </form>
只要后端返回的是 HTML 片段或完整页面,就会自动渲染进名为 resultFrame 的 iframe 中。
注意事项
target 属性本身不改变请求方式或数据格式,它只影响响应的展示位置:
- 对
GET和POST都有效 - 现代浏览器中,
target="_blank"默认启用rel="noopener"安全机制,无需额外加 rel 属性(但显式加上更稳妥) - 如果目标 iframe 不存在或名字拼写错误,响应可能弹出新窗口或降级为
_self - 服务端返回非 HTML 内容(如 JSON、PDF)时,浏览器行为取决于 MIME 类型和用户设置,不一定按预期显示



















