คุณสมบัติเป้าหมายของแบบฟอร์ม HTML DOM

คุณสมบัติเป้าหมายของแบบฟอร์ม HTML DOM ใช้สำหรับระบุตำแหน่งที่การตอบสนองควรแสดงหลังจากส่งข้อมูลในแบบฟอร์มแล้ว มันสามารถแสดงในแท็บใหม่ แท็บปัจจุบัน หรือหน้าต่างใหม่ ชุดคุณสมบัติเป้าหมายของแบบฟอร์มหรือรับค่าแอตทริบิวต์เป้าหมาย

ไวยากรณ์

ต่อไปนี้เป็นไวยากรณ์สำหรับ −

การตั้งค่าคุณสมบัติเป้าหมาย -

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

ที่นี่ _blank จะเปิดการตอบกลับในหน้าต่างใหม่ _self จะเปิดการตอบกลับในหน้าต่างเดียวกัน parent จะเปิดในเฟรมหลัก _top จะเปิดในเนื้อหาแบบเต็มของหน้าต่าง และชื่อเฟรมจะเปิดในเฟรมที่มีชื่อที่ระบุ

ตัวอย่าง

ให้เราดูตัวอย่างคุณสมบัติเป้าหมายของแบบฟอร์ม 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>

ผลลัพธ์

สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ เมื่อคลิกส่ง การตอบกลับจะเปิดขึ้นในหน้าต่างเดียวกัน -

คุณสมบัติเป้าหมายของแบบฟอร์ม HTML DOM

เมื่อคลิกปุ่มเปลี่ยนแล้วคลิกส่ง การตอบสนองจะปรากฏในแท็บใหม่ -

คุณสมบัติเป้าหมายของแบบฟอร์ม HTML DOM

ประกอบด้วยช่องป้อนข้อมูลสองช่องพร้อมข้อความประเภทและปุ่มชื่อ 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() และเปลี่ยนค่าคุณสมบัติเป้าหมายเป็น “_blank” ซึ่งช่วยให้ตอบกลับหลังจากส่งข้อมูลแบบฟอร์มเพื่อแสดงในแท็บใหม่ การเปลี่ยนแปลงนี้จะแสดงโดยใช้ข้อความบางส่วนโดยกำหนดข้อความให้กับย่อหน้าที่มี id “Sample” และใช้คุณสมบัติ innerHTML:

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