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

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

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

จะใช้ HTML อย่างไร

ใน HTML คุณสามารถสร้าง URL นี้ได้โดยใช้องค์ประกอบแบบฟอร์ม (<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 และจะเข้าถึงได้จากฟรอนท์เอนด์หรือสคริปต์แบ็กเอนด์เท่านั้น

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

โดยมีกรณีการใช้งานสำหรับทั้งสองวิธี

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

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

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

ทดสอบความเข้าใจ

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

แหล่งข้อมูล

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