รายละเอียดเกี่ยวกับองค์ประกอบแบบฟอร์ม

ในโมดูลก่อนหน้า คุณได้เรียนรู้วิธีใช้องค์ประกอบ <form> ในโมดูลนี้ คุณจะได้เรียนรู้วิธีการทำงานของแบบฟอร์มและกรณีที่ควรใช้แบบฟอร์ม

คุณควรใช้องค์ประกอบ <form> หรือไม่

คุณไม่จำเป็นต้องใส่ตัวควบคุมแบบฟอร์มไว้ในองค์ประกอบ <form> เสมอไป เช่น คุณอาจระบุองค์ประกอบ <select> เพื่อให้ผู้ใช้เลือกหมวดหมู่ผลิตภัณฑ์ คุณไม่จำเป็นต้องมีองค์ประกอบ <form> ในส่วนนี้ เนื่องจากไม่ได้จัดเก็บหรือประมวลผลข้อมูลในแบ็กเอนด์

อย่างไรก็ตาม ในกรณีส่วนใหญ่เมื่อจัดเก็บหรือประมวลผลข้อมูลจากผู้ใช้ คุณควรใช้องค์ประกอบ <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"> เพื่อสร้างปุ่ม Submit แบบกราฟิก อย่างไรก็ตาม ตอนนี้คุณสร้างปุ่มแบบกราฟิกด้วย 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 ไม่ได้

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

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

แหล่งข้อมูล

• องค์ประกอบ HTML ของแบบฟอร์ม
• แนวทางปฏิบัติแนะนำสำหรับปุ่ม "ส่ง"