参考资料

1. HTML DOM 修改
2. HTML DOM 导航节点关系
3. HTML DOM 返回一个区域的href属性的querystring部分 实例
4. HTML DOM 被按下的键盘键的keycode？
5. HTML DOM 返回一个表单的name 实例
6. HTML DOM document.write() 方法
7. HTML DOM 返回和设置一个iframe中的scrolling属性的值
8. HTML DOM 对iframe排版

HTML DOM 表单 target 属性

简介

表单的 target 属性指定在何处显示表单提交后的响应结果。

标签

<form target="value">

属性值

• _blank - 在新窗口/标签页中打开

• _self - 在当前窗口中打开（默认）

• _parent - 在父框架中打开

• _top - 在整个窗口中打开

• framename - 在指定的框架中打开

用法

<form action="submit.php" target="_blank">
  <!-- 表单内容 -->
</form>

DOM 访问方法

// 获取 target 值
var targetValue = document.getElementById("myForm").target;

// 设置 target 值
document.getElementById("myForm").target = "_blank";

实例

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

<script>
  // 获取并修改 target
  var form = document.getElementById("myForm");
  console.log(form.target); // 输出 "_blank"
  form.target = "_self"; // 修改为在当前窗口打开
</script>

功能

• 控制表单提交后响应页面的打开方式

• 可用于多窗口/框架环境下的表单处理

• 与 iframe 配合可实现无刷新表单提交

CSS 扩展

虽然 target 属性本身不受 CSS 影响，但可以通过 CSS 为不同 target 的表单添加样式：

form[target="_blank"] {
  border: 1px solid blue;
}

form[target="_self"] {
  border: 1px solid green;
}