คุณได้เรียนรู้วิธีใช้องค์ประกอบ <form>
ในโมดูลก่อนหน้าแล้ว
ในโมดูลนี้ คุณจะได้เรียนรู้วิธีการทำงานของแบบฟอร์มและกรณีที่ควรใช้แบบฟอร์ม
คุณควรใช้องค์ประกอบ <form>
ไหม
คุณไม่จำเป็นต้องใส่ตัวควบคุมแบบฟอร์มในองค์ประกอบ <form>
เสมอไป
เช่น คุณอาจระบุเอลิเมนต์ <select>
เพื่อให้ผู้ใช้เลือกหมวดหมู่ผลิตภัณฑ์
คุณไม่จำเป็นต้องใช้เอลิเมนต์ <form>
ที่นี่ เนื่องจากคุณไม่ได้จัดเก็บหรือประมวลผลข้อมูลในแบ็กเอนด์
แต่ในกรณีส่วนใหญ่ เมื่อคุณจัดเก็บหรือประมวลผลข้อมูลจากผู้ใช้
คุณควรใช้องค์ประกอบ <form>
ดังที่คุณจะได้เรียนรู้ในโมดูลนี้ การใช้ <form>
จะทำให้คุณมีฟังก์ชันในตัวมากมายจากเบราว์เซอร์ที่คุณอาจต้องสร้างด้วยตัวเอง
<form>
ยังมีฟีเจอร์การช่วยเหลือพิเศษมากมายในตัวโดยค่าเริ่มต้น
หากต้องการหลีกเลี่ยงการโหลดหน้าซ้ำเมื่อผู้ใช้ส่งแบบฟอร์ม
คุณยังสามารถใช้องค์ประกอบ <form>
แต่ปรับปรุงให้ดีขึ้นด้วย
JavaScript
<form>
ทำงานอย่างไร
คุณได้เรียนรู้ว่า <form>
เป็นวิธีที่ดีที่สุดในการจัดการข้อมูลผู้ใช้
คุณอาจสงสัยว่าแบบฟอร์มทำงานอย่างไร
<form>
คือคอนเทนเนอร์สำหรับการควบคุมแบบฟอร์มแบบอินเทอร์แอกทีฟ
<form method="post">
<label for="name">Name</label>
<input type="text" name="name" id="name">
<button formaction="/name">Save</button>
</form>
การส่งแบบฟอร์มทำงานอย่างไร
เมื่อส่ง <form>
เบราว์เซอร์จะตรวจสอบแอตทริบิวต์ <form>
ข้อมูลจะส่งในรูปแบบ GET
หรือคำขอ POST
ตามแอตทริบิวต์ method
ถ้าไม่มีแอตทริบิวต์ method
ค่า
มีการสร้างคำขอ GET
ไปยัง URL ของหน้าปัจจุบัน
คุณจะเข้าถึงและประมวลผลข้อมูลในแบบฟอร์มได้อย่างไร
JavaScript จัดการข้อมูลที่ส่งในฟรอนท์เอนด์ได้โดยใช้คำขอ GET
หรือตามโค้ดในแบ็กเอนด์โดยใช้คำขอ GET
หรือ POST
ดูข้อมูลเพิ่มเติมเกี่ยวกับ
ประเภทคำขอและการโอนข้อมูลแบบฟอร์ม
เมื่อส่งแบบฟอร์ม เบราว์เซอร์จะส่งคำขอไปยัง URL ที่เป็นค่าของแอตทริบิวต์ action
นอกจากนี้ เบราว์เซอร์จะตรวจสอบว่าปุ่มส่งมีแอตทริบิวต์ formaction
หรือไม่
ในกรณีนี้ ระบบจะใช้ URL ที่ระบุไว้
นอกจากนี้ เบราว์เซอร์จะค้นหาแอตทริบิวต์เพิ่มเติมในองค์ประกอบ <form>
เช่น เพื่อตัดสินใจว่าควรตรวจสอบแบบฟอร์มหรือไม่ (novalidate
)
ควรใช้การเติมข้อความอัตโนมัติ (autocomplete="off"
) หรือการเข้ารหัสแบบใด (accept-charset
)
ลองสร้างแบบฟอร์มที่ผู้ใช้สามารถส่งสีที่ชื่นชอบได้
ควรส่งข้อมูลเป็นคำขอ POST
และ URL ที่จะมีการประมวลผลข้อมูลควรเป็น /color
วิธีหนึ่งที่เป็นไปได้คือการใช้แบบฟอร์มนี้
<form method="post" action="/color"> <label for="color">What is your favorite color?</label> <input type="text" name="color" id="color"> <button>Save</button> </form>
ตรวจสอบว่าผู้ใช้ส่งแบบฟอร์มได้
คุณสามารถส่งแบบฟอร์มได้ 2 วิธี
คุณสามารถคลิกปุ่มส่ง หรือกด Enter
ขณะใช้ตัวควบคุมแบบฟอร์มใดก็ได้
คุณสามารถเพิ่มปุ่มส่งได้หลายวิธี
ตัวเลือกหนึ่งคือการใช้องค์ประกอบ <button>
ภายในแบบฟอร์ม
ตราบใดที่คุณไม่ได้ใช้ type="button"
ปุ่มนี้จะทำหน้าที่เป็นปุ่มส่ง
อีกตัวเลือกหนึ่งคือการใช้ <input type="submit" value="Submit">
ตัวเลือกที่ 3 คือการใช้ <input type="image" alt="Submit" src="submit.png">
เพื่อสร้างปุ่มส่งแบบกราฟิก
อย่างไรก็ตาม ตอนนี้คุณสามารถสร้างปุ่มแบบกราฟิกด้วย CSS ได้แล้ว เราไม่แนะนำให้ใช้ type="image"
อนุญาตให้ผู้ใช้ส่งไฟล์
ใช้ <input type="file">
เพื่อให้ผู้ใช้อัปโหลดและส่งไฟล์ได้หากจำเป็น
<label for="file">Choose file to upload</label>
<input type="file" id="file" name="file" multiple>
ขั้นแรก ให้เพิ่มเอลิเมนต์ <input>
ที่มี type="file"
ลงในแบบฟอร์ม
เพิ่มแอตทริบิวต์ multiple
หากผู้ใช้ควรอัปโหลดได้หลายไฟล์
ต้องทำการเปลี่ยนแปลงอีก 1 รายการเพื่อให้แน่ใจว่าผู้ใช้จะอัปโหลดไฟล์ได้ โดยตั้งค่าแอตทริบิวต์ enctype
ในแบบฟอร์ม
ค่าเริ่มต้นคือ application/x-www-form-urlencoded
<form method="post" enctype="multipart/form-data">
…
</form>
หากต้องการตรวจสอบว่าส่งไฟล์ได้ ให้เปลี่ยนเป็น multipart/form-data
หากไม่มีการเข้ารหัสนี้ จะส่งไฟล์ด้วยคำขอ POST
ไม่ได้
ตรวจสอบความเข้าใจ
ทดสอบความรู้ของคุณเกี่ยวกับองค์ประกอบของแบบฟอร์ม
enctype
ต้องมีค่าเท่าใดจึงจะส่งไฟล์ได้
form-data
multipart/form-files
form-files
multipart/form-data
ส่งข้อมูลผู้ใช้โดยไม่มี <form>
ได้ไหม
คุณจะส่ง <form>
ได้อย่างไร
<input type="image">
<button>
Enter