参考资料

  1. HTML DOM 返回图像映射的某个区域的target的值 实例
  2. HTML DOM 节点列表长度
  3. HTML DOM单元格内容垂直对齐
  4. HTML DOM 返回一个区域的href属性的querystring部分 实例
  5. HTML DOM 返回一个锚的名字 实例
  6. HTML DOM 改变一个iframe的src
  7. HTML DOM 返回页面上所有相对链接的基链接 实例
  8. HTML DOM 打开输出流,向流中输入文本实例

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;
}

声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。