ดูข้อมูลพื้นฐานของการใช้แบบฟอร์มบนเว็บด้วยข้อมูลเบื้องต้นเกี่ยวกับแบบฟอร์ม
สมมติว่าคุณต้องการถามผู้คนบนเว็บไซต์เกี่ยวกับสัตว์ที่พวกเขาชื่นชอบ ในขั้นแรก คุณต้องมีวิธีรวบรวมข้อมูล
คุณจะใช้ 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
คุณจะประมวลผลข้อมูลในแบบฟอร์มอย่างไร
ลองใช้เลย
คุณเลือกตำแหน่งของสคริปต์ได้โดยใช้แอตทริบิวต์ action
<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>
<form-container>
<form-element>
<form>
คุณใช้แอตทริบิวต์ใดเพื่อกำหนดตำแหน่งที่ประมวลผล <form>
ได้
url
href
action
where
วิธีการส่งคำขอเริ่มต้นคืออะไร
POST
GET