Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

แอตทริบิวต์ target ของ <form>: กำหนดเป้าหมายการแสดงผลหลังส่งฟอร์ม

แอตทริบิวต์ target ของ <form> คืออะไร?

แอตทริบิวต์ target ของแท็ก <form> ใช้สำหรับ กำหนดที่จะแสดงผลลัพธ์หลังจากส่งฟอร์ม (Submit) ไปที่ไหน เช่น แท็บใหม่ เฟรมเดิม เฟรมพาเรนต์ เป็นต้น

ไวยากรณ์ (Syntax)

<form target="_blank | _self | _parent | _top | framename">

ค่าที่ใช้ได้

ค่าคำอธิบาย
_blankแสดงผลในแท็บ/หน้าต่างใหม่
_selfแสดงผลในเฟรมเดิม (ค่าเริ่มต้น)
_parentแสดงผลในเฟรมพาเรนต์
_topแสดงผลในหน้าต่างเต็มจอ
framenameแสดงผลในเฟรมที่มี name ตรงกัน

ตัวอย่างการใช้งาน

<!DOCTYPE html>
<html>
<body>
  <h2>บันทึกคะแนน</h2>
  <form action="save_score.php" method="post" target="_blank">
    ผู้เล่น: <input type="text" name="player"><br>
    อันดับ: <input type="number" name="rank"><br>
    คะแนน: <input type="number" name="points"><br>
    <button type="submit">บันทึก</button>
  </form>
</body>
</html>

การทำงาน

เมื่อผู้ใช้กรอกข้อมูลและกด "บันทึก" ฟอร์มจะส่งข้อมูลไปที่ save_score.php และ **เปิดหน้าผลลัพธ์ในแท็บใหม่** เนื่องจากตั้ง target="_blank"

กรณีใช้งานที่พบบ่อย

  • target="_blank": ฟอร์มล็อกอิน/สมัครสมาชิก ที่ต้องการให้หน้าเดิมคงอยู่
  • target="_self": ฟอร์มทั่วไป (ค่าเริ่มต้น)
  • target="resultFrame": แสดงผลใน iframe ชื่อ resultFrame (ใช้ใน Dashboard)