ใช้แบบฟอร์มเพื่อรับข้อมูลจากผู้ใช้

ดูข้อมูลพื้นฐานของการใช้แบบฟอร์มบนเว็บด้วยข้อมูลเบื้องต้นเกี่ยวกับแบบฟอร์ม

สมมติว่าคุณต้องการถามผู้คนบนเว็บไซต์เกี่ยวกับสัตว์ที่พวกเขาชื่นชอบ ในขั้นแรก คุณต้องมีวิธีรวบรวมข้อมูล

คุณจะใช้ HTML ได้อย่างไร

ใน HTML คุณสามารถสร้างพารามิเตอร์นี้โดยใช้เอลิเมนต์แบบฟอร์ม (<form>) <input> ที่มี <label> และการส่ง <button>

องค์ประกอบแบบฟอร์มคืออะไร

<form>
  <label for="animal">What is your favorite animal?</label>
  <input type="text" id="animal" name="animal">
  <button>Save</button>
</form>

องค์ประกอบของแบบฟอร์มประกอบด้วยแท็กเริ่มต้น <form> แอตทริบิวต์ที่ไม่บังคับที่กำหนดไว้ในแท็กเริ่มต้น และแท็กปิดท้าย </form>

คุณรวมองค์ประกอบแบบฟอร์ม เช่น <input> และ <textarea> ระหว่างแท็กเริ่มต้นและสิ้นสุดได้ สำหรับข้อมูลจากผู้ใช้ประเภทต่างๆ ดูข้อมูลเพิ่มเติมเกี่ยวกับองค์ประกอบของแบบฟอร์มในโมดูลถัดไป

ระบบประมวลผลข้อมูลที่ไหน

เมื่อส่งแบบฟอร์ม (เช่น เมื่อผู้ใช้คลิกปุ่มส่ง) เบราว์เซอร์ส่งคำขอ สคริปต์จะตอบสนองต่อคำขอดังกล่าวและประมวลผลข้อมูลได้

โดยค่าเริ่มต้น ระบบจะส่งคำขอไปยังหน้าเว็บที่แสดงแบบฟอร์ม

สมมติว่าคุณต้องการให้สคริปต์ทำงานที่ https://web.dev คุณจะประมวลผลข้อมูลในแบบฟอร์มอย่างไร ลองใช้เลย

<form action="https://example.com/animals">
...
</form>

ตัวอย่างก่อนหน้านี้ส่งคำขอไปยัง https://example.com/animals สคริปต์ในแบ็กเอนด์ example.com สามารถจัดการคำขอไปยัง /animals ได้ และประมวลผลข้อมูลจากแบบฟอร์ม

มีการโอนข้อมูลอย่างไร

โดยค่าเริ่มต้น ระบบจะส่งข้อมูลแบบฟอร์มเป็นคำขอGET ด้วยข้อมูลที่ส่งต่อท้าย URL หากผู้ใช้ส่ง "กบ" ในตัวอย่างข้างต้น เบราว์เซอร์จะส่งคำขอไปยัง URL ต่อไปนี้

https://example.com/animals?animal=frog

ในกรณีนี้ คุณสามารถเข้าถึงข้อมูลในฟรอนท์เอนด์หรือแบ็กเอนด์ได้โดยการรับข้อมูลจาก URL

คุณจะสั่งให้แบบฟอร์มใช้คำขอ POST ได้โดยเปลี่ยนแอตทริบิวต์เมธอด

<form method="post">
...
</form>

เมื่อใช้ POST ข้อมูลจะรวมอยู่ใน เนื้อหาของคำขอ

ข้อมูลจะไม่ปรากฏใน URL และจะเข้าถึงได้จากสคริปต์ฟรอนท์เอนด์หรือสคริปต์แบ็กเอนด์เท่านั้น

คุณควรใช้วิธีการใด

โดยมีกรณีการใช้งานทั้ง 2 วิธี

สำหรับแบบฟอร์มที่ประมวลผลข้อมูลที่ละเอียดอ่อน ให้ใช้เมธอด POST ระบบจะเข้ารหัสข้อมูล (หากคุณใช้ HTTPS) และจะเข้าถึงได้ด้วยสคริปต์แบ็กเอนด์ที่ประมวลผลคำขอเท่านั้น ข้อมูลนี้ไม่ปรากฏใน URL ตัวอย่างที่พบบ่อยคือแบบฟอร์มลงชื่อเข้าใช้

หากข้อมูลแชร์ได้ คุณจะใช้เมธอด GET ได้ ด้วยวิธีนี้ ข้อมูลจะถูกเพิ่มลงในประวัติเบราว์เซอร์ของคุณตามที่รวมอยู่ใน URL ฟอร์มการค้นหามักใช้วิธีนี้ วิธีนี้ช่วยให้คุณบุ๊กมาร์กหน้าผลการค้นหาได้

เมื่อได้เรียนรู้เกี่ยวกับองค์ประกอบของแบบฟอร์มแล้ว ก็ถึงเวลาเรียนรู้เกี่ยวกับ ช่องของฟอร์ม เพื่อทำให้แบบฟอร์มของคุณเป็นแบบอินเทอร์แอกทีฟ

ตรวจสอบความเข้าใจ

ทดสอบความรู้ของคุณเกี่ยวกับองค์ประกอบของแบบฟอร์ม

แหล่งข้อมูล

องค์ประกอบ <form>