HTML
Forms
Submit Form
บทนี้สอนผู้เริ่มต้นให้เข้าใจว่า submit คือการส่งข้อมูลจากฟอร์ม โดยเชื่อมภาพตั้งแต่ผู้ใช้กรอกข้อมูล กดปุ่ม `type="submit"` จนข้อมูลถูกส่งไปยังปลายทางผ่าน `action` และ `method` แบบพื้นฐาน
1. หัวข้อนี้คืออะไร
Submit Form คือขั้นตอนที่ฟอร์มส่งข้อมูลที่ผู้ใช้กรอกออกไปจากหน้าเว็บ เมื่อผู้ใช้กดปุ่ม `button type="submit"` (หรือเกิดการ submit ด้วยวิธีอื่นที่เทียบเท่า) เบราว์เซอร์จะรวบรวมค่าจาก controls ใน `<form>` แล้วส่งไปตามค่าที่กำหนดใน `action` และ `method`
2. ทำไมหัวข้อนี้สำคัญ
- ฟอร์มจะมีประโยชน์จริงเมื่อส่งข้อมูลได้สำเร็จผ่านการ submit
- ช่วยให้เห็นความสัมพันธ์ระหว่าง `form` กับปุ่ม `type="submit"` ชัดเจน
- ช่วยตั้งค่าพื้นฐานที่ถูกต้อง เช่น `action` และ `method`
- ลดบั๊กที่พบบ่อย เช่น กดปุ่มแล้วไม่ส่งข้อมูลเพราะโครงสร้างผิด
3. ตัวอย่างจากชีวิตจริง
ลองนึกถึงฟอร์มล็อกอิน: 1) ผู้ใช้กรอกอีเมลและรหัสผ่าน 2) กดปุ่ม "เข้าสู่ระบบ" 3) เบราว์เซอร์ส่งข้อมูลไปปลายทางที่ระบบกำหนด Flow นี้คือการ submit form แบบพื้นฐาน และเป็นรูปแบบเดียวกับฟอร์มสมัครสมาชิก ค้นหา หรือส่งคำขอต่าง ๆ
4. แนวคิดหลักที่ต้องเข้าใจ
- `form` คือกล่องรวมข้อมูลที่จะถูกส่งตอน submit
- `button type="submit"` คือปุ่มที่สั่งให้ฟอร์มส่งข้อมูล
- `action` คือปลายทางที่ข้อมูลจะถูกส่งไป
- `method` คือวิธีส่งข้อมูล เช่น `GET` และ `POST` ในระดับพื้นฐาน
- บทนี้เน้น flow การใช้งานฝั่งหน้าเว็บ ยังไม่ลงลึก backend หรือ networking
5. การทำงานทีละขั้นตอน
- 1) สร้าง `<form>` แล้วใส่ fields ที่ต้องรับข้อมูล
- 2) กำหนด `action` เพื่อบอกปลายทาง
- 3) กำหนด `method` เช่น `get` หรือ `post`
- 4) ใส่ปุ่ม `<button type="submit">` ภายในฟอร์ม
- 5) ผู้ใช้กรอกข้อมูลและกด submit จากนั้นเบราว์เซอร์จะรวมข้อมูลและส่งออก
6. ตัวอย่างเชิงเทคนิค / โค้ด
ตัวอย่างนี้แสดง flow submit แบบพื้นฐาน: กรอกข้อมูลในฟอร์ม แล้วกดปุ่ม submit เพื่อส่งข้อมูลไปปลายทางที่กำหนดใน action ด้วย method ที่เลือก
7. จุดที่ผู้เริ่มต้นมักสับสน
- คิดว่ามีฟอร์มอย่างเดียวพอ ทั้งที่ต้องมี trigger การ submit ด้วย
- ใช้ปุ่ม `type="button"` แล้วสงสัยว่าทำไมฟอร์มไม่ส่ง
- ลืมกำหนด `action` และ `method` ทำให้ไม่เห็นพฤติกรรมที่ชัดเจน
- วางปุ่ม submit นอก `<form>` โดยไม่ตั้งค่าเชื่อม ทำให้กดแล้วไม่ส่ง
8. เปรียบเทียบกับสิ่งที่ใกล้เคียง
| คู่เปรียบเทียบ | ความต่าง | เลือกใช้อย่างไร |
|---|---|---|
| `button type="submit"` vs `button type="button"` | submit สั่งส่งฟอร์ม, button ธรรมดาไม่ส่งฟอร์มเอง | ถ้าต้องการส่งข้อมูลของฟอร์ม ให้ใช้ submit |
| `GET` vs `POST` | GET มักใช้กับการอ่าน/ค้นหาแบบพื้นฐาน, POST มักใช้ส่งข้อมูลที่ต้องการประมวลผลหรือบันทึก | เริ่มต้นให้เลือกตามเจตนางาน: ค้นหาใช้ GET, ส่งข้อมูลฟอร์มทั่วไปใช้ POST |
| มี `action`/`method` vs ไม่กำหนด | กำหนดชัดจะเข้าใจปลายทางและวิธีส่งชัดเจนกว่า | บทเริ่มต้นควรกำหนดทั้ง action และ method ให้ชัดทุกครั้ง |
9. สรุปท้ายบทแบบจำง่าย
- submit คือการส่งข้อมูลจากฟอร์ม
- ฟอร์มทำงานร่วมกับปุ่ม `type="submit"`
- `action` บอกปลายทาง, `method` บอกวิธีส่ง
- ถ้าปุ่มไม่ใช่ submit ฟอร์มอาจไม่ถูกส่ง
- เริ่มจาก flow ง่าย ๆ: กรอก -> กดส่ง -> เบราว์เซอร์ส่งข้อมูล
10. Lab สำหรับ Playground
ฝึก 3 ระดับเพื่อให้เห็นการ submit form ตั้งแต่โครงพื้นฐานจนถึงการแก้โค้ดที่พัง
Lab 1 (พื้นฐาน): เพิ่มปุ่ม submit ให้ form
ชื่อ Lab: เปิดการส่งฟอร์มด้วยปุ่ม submit เป้าหมาย: ทำให้ฟอร์มส่งข้อมูลได้ด้วยปุ่มที่ถูกต้อง โจทย์: ใน <form id="login-form"> ให้เพิ่ม <button type="submit">เข้าสู่ระบบ</button> เงื่อนไข: ปุ่มต้องอยู่ภายใน form#login-form และมีเพียงปุ่ม submit 1 ตัว สิ่งที่ระบบควรตรวจ: selector exists, selector count, source text, attribute value และ browser runtime แนวทางการคิด: ถ้าปุ่มทำหน้าที่ส่งฟอร์ม ให้ระบุ type="submit" ชัดเจน
Lab 2 (กลาง): กำหนด action และ method พื้นฐาน
ชื่อ Lab: ตั้งปลายทางและวิธีส่งข้อมูล เป้าหมาย: กำหนด action/method พื้นฐานให้ฟอร์ม submit ชัดเจน โจทย์: สร้าง <form id="search-form"> ที่มี action="/search" และ method="get" พร้อม input#keyword และปุ่ม submit ข้อความ "ค้นหา" เงื่อนไข: ต้องมี action/method ตรงตามโจทย์ และ input ต้องมี name="keyword" สิ่งที่ระบบควรตรวจ: selector exists, selector count, source text, attribute value และ browser runtime แนวทางการคิด: เมื่อเป็นฟอร์มค้นหาเบื้องต้น ให้เริ่มจาก method="get"
Lab 3 (ท้าทาย): แก้ฟอร์มที่ submit ไม่ทำงานเพราะโครงสร้างไม่ถูก
ชื่อ Lab: ซ่อมโครงสร้าง submit ให้ทำงาน เป้าหมาย: แก้โค้ดที่กดปุ่มแล้วไม่ส่งฟอร์มเพราะปุ่มอยู่นอก form และใช้ type ผิด โจทย์: จากโค้ดตั้งต้น ให้ย้ายปุ่มเข้าไปใน form#profile-form และเปลี่ยนเป็น type="submit" พร้อมตั้ง method="post" และ action="/profile/save" เงื่อนไข: ต้องคง input เดิม และข้อความปุ่มเป็น "บันทึกโปรไฟล์" สิ่งที่ระบบควรตรวจ: selector exists, selector count, source text, attribute value และ browser runtime แนวทางการคิด: submit จะชัดเจนที่สุดเมื่อปุ่ม submit อยู่ใน form เดียวกับข้อมูล