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

คุณได้เรียนรู้วิธีใช้องค์ประกอบ <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 ไม่ได้

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

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

แหล่งข้อมูล

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