HTML DOM Form target property

The HTML DOM Form target property is used for specifiying where the response should be displayed after the form data has been submitted. It could display in a new tab, current tab or a new window. The form target property set or gets the target attribute value.

Syntax

Following is the syntax for −

Setting the target property −

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

Here, _blank will open the response in new window, _self will open the response in the same window; parent will open in the parent frame, _top will open in full window body and framename will open it in a specified named frame.

Example

Let us look at an example of the HTML DOM Form target property −

<!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>

Output

This will produce the following output. On clicking submit, the response will open in the same window −

HTML DOM Form target property

On clicking the CHANGE button and then clicking on submit; the response will now be displayed in a new tab −

HTML DOM Form target property

It contains two input fields with type text and a button named 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>

We then created a button CHANGE that will execute the changeTarg() method when clicked by the user −

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

The ChangeTarg() method will get the <form> element using the document object getElementById() method and change its target property value to “_blank”. This allows the response after the form-data has been submitted to display in a new tab. This change is then displayed using some text by assigning the text to paragraph having id “Sample” and using its innerHTML property:

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