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