คุณได้เรียนรู้วิธีใช้องค์ประกอบ <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
ต้องใช้ค่าใดในการส่งไฟล์
multipart/form-data
multipart/form-files
form-data
form-files
เป็นไปได้ไหมที่จะส่งข้อมูลผู้ใช้โดยไม่มี <form>
คุณจะส่ง <form>
ได้อย่างไร
<button>
Enter
<input type="image">