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

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

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

ใน 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 เพื่อประมวลผลข้อมูลแบบฟอร์ม คุณจะทำอย่างไร ลองใช้ใน CodePen

      <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>