ทำไม Formaction ไม่ทำงานนอกแท็ก <form> และวิธาแก้

บทนำ

แอตทริบิวต์ formaction ต้องอยู่ภายใน <form> จึงจะทำงาน แต่สามารถวางปุ่มนอกฟอร์มได้โดยใช้แอตทริบิวต์ form อ้างอิง ID ของฟอร์ม

ตัวอย่างปกติ (ในฟอร์ม)

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Formaction Attribute</title>
  </head>
  <body>
    <form method="post">
      <input type="text" name="name" /><br>
      <button type="submit" formaction="btn1.php">Button1</button>
      <button type="submit" formaction="btn2.php">Button2</button>
      <button type="submit" formaction="btn3.php">Button3</button>
    </form>
  </body>
</html>

วิธาวางปุ่มนอกฟอร์ม (ใช้ form attribute)

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Formaction Outside Form</title>
  </head>
  <body>
    <form method="post" id="myForm">
      <input type="text" name="name" />
    </form>
    
    <button type="submit" formaction="btn1.php" form="myForm">Button1</button>
    <button type="submit" formaction="btn2.php" form="myForm">Button2</button>
    <button type="submit" formaction="btn3.php" form="myForm">Button3</button>
  </body>
</html>

คำอธิบาย

• form="myForm" - อ้างอิง id="myForm" ของฟอร์ม
• ปุ่มสามารถวางที่ไหนในหน้าได้ (Flexible Layout)
• รองรับ formaction, formmethod, formenctype, formtarget, formnovalidate พร้อมกัน