คุณสมบัติ HTML DOM Form target

คุณสมบัติ target ของ HTML DOM Form ใช้สำหรับระบุว่าควรแสดงผลการตอบกลับ (response) ที่ไหน หลังจากส่งข้อมูลฟอร์มแล้ว อาจแสดงในแท็บใหม่ แท็บปัจจุบัน หรือหน้าต่างใหม่ คุณสมบัติ target ตั้งค่าหรือรับค่าแอตทริบิวต์ target

ไวยากรณ์ (Syntax)

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

ที่นี่ _blank เปิดในหน้าต่างใหม่ _self เปิดในหน้าต่างเดียวกัน _parent เปิดในเฟรมพาเรนต์ _top เปิดเต็มหน้าต่าง และ framename เปิดในเฟรมที่กำหนดชื่อ

ตัวอย่าง (Example)

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

ผลลัพธ์ที่ได้ คลิก submit จะเปิดในหน้าต่างเดียวกัน:

เมื่อคลิกปุ่ม CHANGE แล้วคลิก submit ผลลัพธ์จะแสดงในแท็บใหม่:

คำอธิบายโค้ด

ฟอร์มมี 2 input type text และปุ่ม 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() ดึง <form> element และเปลี่ยน target เป็น "_blank" เพื่อให้ response แสดงในแท็บใหม่ แสดงการเปลี่ยนแปลงในพารากราฟ id "Sample":

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