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

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

คุณควรใช้คอมโพเนนต์ <form> ไหม

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

คุณไม่จำเป็นต้องวางตัวควบคุมแบบฟอร์มในองค์ประกอบ <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">

อีกตัวเลือกหนึ่งคือการใช้ <input type="image" alt="Submit" src="submit.png">, เพื่อสร้างปุ่มส่งแบบกราฟิก อย่างไรก็ตาม ตอนนี้คุณสร้างปุ่มกราฟิกด้วย CSS ได้แล้ว จึงไม่แนะนำให้ใช้ type="image"

สุดท้ายนี้ อย่าเพิ่มการหมดเวลา ให้เวลาผู้ใช้ส่งแบบฟอร์มได้นานเท่าที่ต้องการ การหมดเวลาทำให้ข้อมูลสูญหายและสร้างความหงุดหงิดให้กับผู้ใช้ อ่านหลักเกณฑ์การหมดเวลาของแบบฟอร์ม W3C

เปิดให้ผู้ใช้ส่งไฟล์

ใช้ <input type="file"> เพื่อให้ผู้ใช้สามารถอัปโหลดและส่งไฟล์ได้หากจำเป็น

<label for="file">Choose file to upload</label>
<input type="file" id="file" name="file" multiple>

ก่อนอื่นให้เพิ่มองค์ประกอบ <input> ที่มี type="file" ลงในแบบฟอร์ม เพิ่มแอตทริบิวต์ multiple หากผู้ใช้ควรจะอัปโหลดไฟล์ได้หลายไฟล์

คุณต้องทำการเปลี่ยนแปลงอีกอย่างเพื่อให้ผู้ใช้อัปโหลดไฟล์ได้ นั่นคือการตั้งค่า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>

ไม่
ลองอีกครั้งนะ
ได้ด้วย JavaScript
🎉
ได้ เมื่อใช้ Flash
ลองอีกครั้งนะ
ได้ โดยใช้ HTML5
ลองอีกครั้งนะ

คุณจะส่ง <form> ได้อย่างไร

คลิก <button>
ลองอีกครั้งนะ
กด Enter
ลองอีกครั้งนะ
คลิก <input type="image">
ลองอีกครั้งนะ
คำตอบทั้งหมดถูกต้อง
🎉

แหล่งข้อมูล