HTML | DOM 表单目标属性

简介

在 HTML 表单中，可以通过设置表单的 target 属性来指定表单提交数据的目标位置，其中目标位置可以是一个窗口、一个框架或者一个隐藏的 iframe。这个属性对于作为表单提交结果的页面来说具有重要的作用，同时也会影响到服务器端对于表单数据的处理。

语法

<form target="_self|_blank|_parent|_top|framename"></form>

• _self：表单将在当前窗口中加载提交结果；
• _blank：表单将在一个新的窗口或标签页中加载提交结果；
• _parent：表单将在当前窗口的父窗口中加载提交结果，如果当前窗口没有父窗口，则与 _self 效果相同；
• _top：表单将在当前浏览器窗口的顶层窗口中加载提交结果，如果当前窗口已经是顶层窗口，则与 _self 效果相同；
• framename：目标窗口的名称或框架的名称，该名称是在 <iframe> 或 <frame> 元素中通过 name 属性指定的。

示例

在当前窗口中加载提交结果

<form action="submit.php" method="post" target="_self">
  <input type="text" name="username">
  <input type="submit" value="提交">
</form>

在一个新的窗口或标签页中加载提交结果

<form action="submit.php" method="post" target="_blank">
  <input type="text" name="username">
  <input type="submit" value="提交">
</form>

在当前窗口的父窗口中加载提交结果

<form action="submit.php" method="post" target="_parent">
  <input type="text" name="username">
  <input type="submit" value="提交">
</form>

在当前浏览器窗口的顶层窗口中加载提交结果

<form action="submit.php" method="post" target="_top">
  <input type="text" name="username">
  <input type="submit" value="提交">
</form>

在一个指定的 iframe 中加载提交结果

<iframe name="result"></iframe>

<form action="submit.php" method="post" target="result">
  <input type="text" name="username">
  <input type="submit" value="提交">
</form>

注意事项

• 如果表单的 target 属性值与已有的窗口或框架的名称相同，则表单的提交结果将覆盖该窗口或框架中已有的内容；
• 在使用 _self、_parent 或 _top 等内置目标时，其效果会受到当前窗口和页面结构的影响，具体效果需要进行测试和验证；
• 如果目标窗口或框架中的页面与表单提交的页面不在同一个域下，那么浏览器将会禁止访问该窗口或框架中的页面，原因是浏览器执行了同源策略（Same Origin Policy）进行了限制；