HTML DOM Form target属性用法及代码示例

HTML DOM 表单目标属性用于指定提交表单数据后应在何处显示响应。它可以显示在新选项卡、当前选项卡或新窗口中。表单目标属性设置或获取目标属性值。

用法

以下是语法 -

设置目标属性 -

formObject.target = "_blank|_self|_parent|_top|framename"

这里，_blank 将在新窗口中打开响应，_self 将在同一窗口中打开响应； parent 将在父框架中打开，_top 将在完整的窗口主体中打开，而 framename 将在指定的命名框架中打开它。

示例

让我们看一个 HTML DOM 表单目标属性的例子 -

<!DOCTYPE html>
<html>
<head>
<style>
   form {
      border:2px solid blue;
      margin:2px;
      padding:4px;
   }
</style>
<script>
   function SubmitForm() {
      document.getElementById("FORM1").submit();
   }
</script>
</head>
<body>
<h1>Form submit() method example</h1>
<form id="FORM1" method="post" action="/sample_page.php">
<label>User Name <input type="text" name="usrN"></label><br><br>
<label>Age<input type="text" name="Age"></label> <br><br>
<input type="button" onclick="SubmitForm()" value="SUBMIT">
</form>
</body>
</html>

输出

这将产生以下输出。单击提交时，响应将在同一窗口中打开 -

单击“更改”按钮，然后单击“提交”；响应现在将显示在新选项卡中 -

它包含两个文本类型的输入字段和一个名为 SUBMIT 的按钮 -

<form id="FORM1" method="post" action="/sample_page.php">
<label>User Name <input type="text" name="usrN"></label><br><br>
<label>Age<input type="text" name="Age"></label> <br><br>
<input type="button" onclick="SubmitForm()" value="SUBMIT">
</form>

然后我们创建了一个按钮 CHANGE，当用户点击时，它将执行 changeTarg() 方法 -

<button onclick="ChangeTarg()">CHANGE</button>

ChangeTarg() 方法将使用文档对象 getElementById() 方法获取 <form> 元素，并将其目标属性值更改为 “_blank”。这允许在 form-data 提交后的响应显示在新选项卡中。然后通过将文本分配给具有 id “Sample” 的段落并使用其 innerHTML 属性，使用一些文本显示此更改：

function ChangeTarg() {
   document.getElementById("FORM1").target = "_blank";
   document.getElementById("Sample").innerHTML = "The target attribute value is now _blank.";
}

相关用法

注：本文由纯净天空筛选整理自AmitDiwan大神的英文原创作品 HTML DOM Form target property。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。