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

คุณได้เรียนรู้วิธีใช้องค์ประกอบ <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 ของแบบฟอร์ม
• แนวทางปฏิบัติแนะนำสำหรับปุ่มส่ง