แอตทริบิวต์ action ของฟอร์ม HTML กำหนดว่าจะเกิดอะไรขึ้นกับข้อมูลเมื่อส่งฟอร์มบนหน้าเว็บ ค่าของแอตทริบิวต์ action ควรเป็น URL ของทรัพยากรเว็บที่จะประมวลผลเนื้อหาของฟอร์ม
เมื่อสร้างฟอร์มและขอข้อมูลบนไซต์หรือแอปพลิเคชันเว็บของคุณ คุณมักจะต้องการทำบางอย่างกับข้อมูลของคุณใช่ไหม? นี่คือที่ที่แอตทริบิวต์ action ของฟอร์มเข้ามามีบทบาท
คุณควรทราบพื้นฐานการสร้างฟอร์มใน HTML คุณพื้นฐานคือห่อหุ้มเนื้อหาฟอร์มในองค์ประกอบ <form> ในแท็กเปิด มีแอตทริบิวต์สองสามอย่างที่เราสามารถใช้ได้ และหนึ่งในนั้นคือ action
แอตทริบิวต์ action ใช้ระบุว่าต้องการส่งข้อมูลฟอร์มไปที่ไหนเมื่อส่งฟอร์มแล้ว ดังนั้นค่าของ action คือหน้าที่จะประมวลผลฟอร์ม
แอตทริบิวต์ action ของฟอร์ม HTML ระบุ URL ที่จะประมวลผลเนื้อหาของฟอร์ม คุณควรตรวจสอบให้แน่ใจว่าทรัพยากรเว็บที่แอตทริบิวต์ action ชี้ไป ยอมรับวิธีการ (method) ที่คุณระบุในแอตทริบิวต์ "method" ของคุณ
มาเป้ยดูไวยากรณ์ของแอตทริบิวต์ action กัน:
<form action="/submit.php"> </form>
แอตทริบิวต์ action ปรากฏระหว่างแท็ก <form> เปิดของเรา แอตทริบิวต์นี้มักใช้ร่วมกับแอตทริบิวต์ method
โดยค่าเริ่มต้น แอตทริบิวต์ method ตั้งค่าเป็น "get" หมายความว่าฟอร์มของคุณจะส่งข้อมูลผ่านคำขอ HTTP GET เมื่อส่งแล้ว คุณสามารถเปลี่ยน method โดยระบุ "method='post'" ในแท็ก <form> เปิดของคุณ
ข้อมูลจากฟอร์มจะถูกส่งไปยัง URL "action" เมื่อคลิกปุ่มส่ง (submit button)
ตัวอย่าง HTML Form Action
มาเป้ยดูตัวอย่างกัน:
<form action="process.html" method="get"> <label for="username">User</label> <input type="text" id="username" name="username"><br><br> <label for="email">Email</label> <input type="email" id="email" name="email"><br><br> <input type="submit" value="Submit"> </form>
ข้างต้น action กำลังส่งข้อมูล username และ email ไปยังหน้าที่ชื่อ process.html ข้อมูล username และ email มี input type "text" เรากำหนดปุ่มด้วย input type "submit" เมื่อคลิก ปุ่มนี้จะส่งข้อมูลของเราไปยัง URL "action" ของเรา
ตอนนี้ ใส่ตัวอย่างฟอร์มข้างต้นในไฟล์ HTML จริง แล้วสร้างไฟล์อีกไฟล์ชื่อ process.html ในโฟลเดอร์เดียวกัน ไฟล์นี้ควรมีเนื้อหาดังนี้:
<html> <head> <meta charset="UTF-8"> <title>Process</title> </head> <body>This is the destination process page</body> </html>
โค้ดนี้กำหนดหน้าเว็บง่ายๆ ที่แสดงย่อหน้าข้อความเมื่อโหลดหน้า มาเป้ยกลับไปที่เว็บฟอร์มที่เรากำหนดไว้ก่อนหน้าและกรอกข้อมูล:
ตอนนี้คลิก submit สังเกตว่าเราถูกนำไปยังหน้า process.html อัตโนมัติ! แล้วคุณสังเกตเห็นแถบ URL หรือไม่ มีข้อมูลเพิ่มเติมทั้งหมดนั้นคืออะไร? ข้อมูลหลังสัญลักษณ์ "?" คือพารามิเตอร์คิวรี (query parameters) และเนื่องจากเราระบุคำขอเป็น GET ข้อมูลจึงถูกส่งเป็นพารามิเตอร์คิวรี
ด้วยตัวอย่างนี้ คุณอาจคิดว่านี่ไม่ค่อยมีประโยชน์เลย นั่นเป็นความจริง ปกติแล้วแอตทริบิวต์ action ใช้ส่งเนื้อหาฟอร์มไปยังหน้าเซิร์ฟเวอร์ ตัวอย่างเช่น เราอาจใช้ไฟล์ PHP ชื่อ process.php
process.php นี้จะทำคาถากับข้อมูล หน้านี้อาจบันทึกข้อมูลของเราลงฐานข้อมูล หรือลงทะเบียนคุณให้กิจกรรมโปรดของคุณ สิ่งใดก็ได้ PHP เป็นภาษาสคริปต์ฝั่งเซิร์ฟเวอร์อันทรงพลัง มักใช้ในการพัฒนาเว็บ หากคุณเคยใช้ WordPress น่าจะว่าข้อมูลที่ประมวลผลทำผ่าน PHP
หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับ PHP ดูคู่มือ How to Learn PHP ของเรา
แอตทริบิวต์ action จำเป็นหรือไม่?
ย้อนกลับไปใน HTML4 คำตอบจะเป็นใช่ แต่วันนี้กับ HTML5 คุณไม่จำเป็นต้องระบุแอตทริบิวต์ action หากคุณมีแท็ก form โดยไม่มีแอตทริบิวต์ action ข้อมูลจะถูกส่งไปยังหน้าของมันเอง
ทำไมเราต้องทำเช่นนี้? ด้วยการ诞生ของแอปพลิเคชันหน้าเดียว (Single Page Applications - SPA) เราอาจต้องการประมวลผลข้อมูลฟอร์มโดยใช้ JavaScript หรือเราอาจต้องการประมวลผลข้อมูลโดยใช้เฟรมเวิร์กอื่นอย่าง React / Angular
หากเราใช้ Vanilla JavaScript เรามักทำสิ่งนี้โดยเพิ่ม event listener ของ JavaScript เมื่อฟอร์มถูกส่งแล้ว
สรุป
แอตทริบิวต์ action ของฟอร์ม HTML กำหนดสิ่งที่เกิดขึ้นกับเนื้อหาของฟอร์มเมื่อส่งฟอร์มแล้ว แอตทริบิวต์ action ยอมรับ URL เป็นอาร์กิวเมนต์
คุณสนใจที่จะเป็นนักพัฒนาเว็บหรือไม่? ดูคู่มือ How to Learn HTML 完成版 ของเรา คุณจะพบคำแนะนำจากผู้เชี่ยวชาญเกี่ยวกับการเรียนรู้ HTML รวมถึงรายการหลักสูตรออนไลน์ชั้นนำและแหล่งข้อมูลเรียนรู้
