บทนี้อธิบายคุณสมบัติ (Attributes) ต่าง ๆ ของแท็ก <form> ใน HTML
แอตทริบิวต์ action
action คือ Attribute ที่ใช้กำหนด ปลายทางของข้อมูลแบบฟอร์ม เมื่อผู้ใช้กดปุ่ม Submit
โดยทั่วไป ข้อมูลจากแบบฟอร์มจะถูกส่งไปยังไฟล์บนเซิร์ฟเวอร์เพื่อประมวลผล เช่น ตัวอย่างด้านล่างนี้ ข้อมูลจะถูกส่งไปที่ไฟล์ชื่อ
"action_page.php" ซึ่งมีสคริปต์ฝั่งเซิร์ฟเวอร์สำหรับจัดการข้อมูล
<form action="action_page.php">
<label for="fname">ชื่อ:</label><br>
<input type="text" id="fname" name="fname" value="เด่น"><br>
<label for="lname">นามสกุล:</label><br>
<input type="text" id="lname" name="lname" value="ดี"><br><br>
<input type="submit" value="Submit">
</form>
📝 Tip
ถ้าไม่ระบุ action ข้อมูลฟอร์มจะถูกส่งไปยัง “หน้าปัจจุบัน”
แอตทริบิวต์ target
target ใช้กำหนดว่า จะให้ผลลัพธ์หลังจากส่งแบบฟอร์มไปแสดงที่ใด | ค่า | คำอธิบาย |
|---|---|
_blank | แสดงผลในหน้าต่างหรือแท็บใหม่ |
_self | แสดงผลในหน้าปัจจุบัน (ค่าเริ่มต้น) |
_parent | แสดงผลในเฟรมแม่ (parent frame) |
_top | แสดงผลเต็มหน้าจอ (เต็ม body ของ window) |
| framename | แสดงผลใน iframe ที่มีชื่อระบุไว้ |
ตัวอย่าง ส่งผลลัพธ์ไปเปิดในแท็บใหม่
<form action="action_page.php" target="_blank">
แอตทริบิวต์ method
method ใช้กำหนด รูปแบบการส่งข้อมูล (HTTP Method) เมื่อผู้ใช้กด Submit
รูปแบบที่ใช้ได้คือ
getส่งข้อมูลผ่าน URL (แบบพารามิเตอร์)postส่งข้อมูลในเนื้อหาของ HTTP Request
ค่าเริ่มต้นของ
method คือ GET
ตัวอย่าง (ใช้ GET)
<form action="action_page.php" method="get">
ตัวอย่าง (ใช้ POST)
<form action="action_page.php" method="post">
📝 Tip
แนะนำให้ใช้ POST หากข้อมูลที่ส่งไปนั้นเป็นข้อมูลที่สำคัญ หรือเป็นข้อมูลส่วนบุคคล
แอตทริบิวต์ autocomplete
autocomplete ใช้กำหนดว่าแบบฟอร์มจะให้เบราว์เซอร์ “ช่วยกรอกอัตโนมัติ” หรือไม่
เมื่อเปิดใช้งาน (on) เบราว์เซอร์จะเติมค่าที่ผู้ใช้เคยกรอกไว้ในช่องเดิมอัตโนมัติ
<form action="action_page.php" autocomplete="on">
onเปิดการกรอกอัตโนมัติoffปิดการกรอกอัตโนมัติ
แอตทริบิวต์ novalidate
novalidate เป็น Boolean Attribute
เมื่อกำหนดไว้ หมายความว่าฟอร์มจะ ไม่ตรวจสอบความถูกต้องของข้อมูล (validation) ก่อนส่ง
ตัวอย่าง
<form action="action_page.php" novalidate>
สรุปรายการแอตทริบิวต์ของ <form>
| Attribute | คำอธิบาย |
|---|---|
| accept-charset | ระบุชุดอักขระที่ใช้ในการส่งข้อมูลแบบฟอร์ม เช่น UTF-8 |
| action | ระบุปลายทางสำหรับส่งข้อมูลเมื่อฟอร์มถูก Submit |
| autocomplete | เปิดหรือปิดการกรอกข้อมูลอัตโนมัติ |
| enctype | กำหนดรูปแบบการเข้ารหัสข้อมูลเมื่อส่งด้วย method="post" |
| method | ระบุ HTTP Method ที่ใช้ (get หรือ post) |
| name | ตั้งชื่อให้กับฟอร์ม |
| novalidate | ระบุว่าไม่ต้องตรวจสอบข้อมูลก่อนส่ง |
| target | ระบุตำแหน่งที่จะเเสดงผลลัพธ์หลังจากส่งฟอร์ม |