การเพิ่มความสามารถแบบค่อยเป็นค่อยไปสำหรับแบบฟอร์ม
ออกแบบแบบฟอร์มให้ทำงานได้โดยไม่ใช้ JavaScript และทำงานได้ดียิ่งขึ้นเมื่อใช้ JavaScript
การเพิ่มความสามารถแบบค่อยเป็นค่อยไปสำหรับแบบฟอร์ม เป็นบทเรียน Sveltejs Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Sveltejs Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
ความหมายของ PE
การเพิ่มความสามารถแบบค่อยเป็นค่อยไปคือการสร้างประสบการณ์พื้นฐานที่ทุกคนใช้งานได้ แล้วจึงเพิ่มการปรับปรุงเข้าไป
พื้นฐานที่ไม่ใช้ JS
แบบฟอร์ม HTML ที่ใช้ method=POST ทำงานได้โดยไม่ต้องใช้ JavaScript โดย SvelteKit จะจัดการแบบฟอร์มบนเซิร์ฟเวอร์
เพิ่มชั้น JS
เพิ่ม use:enhance เพื่อส่งข้อมูลฝั่งไคลเอนต์โดยไม่ต้องโหลดหน้าทั้งหมดใหม่
ตรวจสอบฝั่งเซิร์ฟเวอร์
ตรวจสอบข้อมูลบนเซิร์ฟเวอร์เสมอ การตรวจสอบฝั่งไคลเอนต์มีไว้เพื่อประสบการณ์ผู้ใช้เท่านั้น
หลีกเลี่ยง e.preventDefault
ให้ enhance ของ SvelteKit จัดการ preventDefault การจัดการเองจะทำให้เส้นทางที่ไม่ใช้ JS ใช้งานไม่ได้ตามเป้าหมาย
ตัวบ่งชี้การโหลด
แสดงตัวหมุนระหว่างการส่งข้อมูลผ่าน fetch และซ่อนทันทีเมื่อได้รับการตอบกลับ
ประสบการณ์ผู้ใช้ที่ทนทาน
หากโหลด JS ไม่สำเร็จ แบบฟอร์มของคุณก็ยังทำงานได้ ผู้ใช้บนเครือข่ายที่ช้าจะได้รับประโยชน์ด้วย
การช่วยการเข้าถึง
ใช้ป้ายกำกับที่เหมาะสมและภูมิภาค aria-live เพื่อประกาศข้อผิดพลาด
ชั้นการตรวจสอบแบบฟอร์ม
แอตทริบิวต์ HTML5 (required, type, pattern) ช่วยตรวจสอบข้อมูลฝั่งไคลเอนต์ได้โดยไม่ต้องเขียนโค้ดเพิ่ม
<input type="email" required minlength="3" />ความน่าเชื่อถือของเซิร์ฟเวอร์
อย่าเชื่อถือการตรวจสอบฝั่งไคลเอนต์โดยเด็ดขาด ให้ตรวจสอบซ้ำบนเซิร์ฟเวอร์ก่อนบันทึกข้อมูล
ตัวอย่างในโลกจริง
แบบฟอร์มเข้าสู่ระบบควรยืนยันตัวตนผ่าน POST หากเปิดใช้ JS ให้ใช้ enhance เพื่อประสบการณ์ที่ลื่นไหล หากไม่ใช้ การส่งแบบเต็มหน้าก็ยังทำงานได้
ตรวจสอบอย่างรวดเร็ว
เหตุใดจึงต้องตรวจสอบข้อมูลบนเซิร์ฟเวอร์
สรุปทบทวน
สร้างแบบฟอร์มที่ทำงานได้โดยไม่ใช้ JS แล้วเพิ่มความสามารถด้วย use:enhance ตรวจสอบข้อมูลบนเซิร์ฟเวอร์เสมอ
คำถามที่พบบ่อย
บทเรียน “การเพิ่มความสามารถแบบค่อยเป็นค่อยไปสำหรับแบบฟอร์ม” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การเพิ่มความสามารถแบบค่อยเป็นค่อยไปสำหรับแบบฟอร์ม” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Sveltejs Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การเพิ่มความสามารถแบบค่อยเป็นค่อยไปสำหรับแบบฟอร์ม”
ออกแบบแบบฟอร์มให้ทำงานได้โดยไม่ใช้ JavaScript และทำงานได้ดียิ่งขึ้นเมื่อใช้ JavaScript คุณปฏิบัติ Sveltejs Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Sveltejs Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Sveltejs Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน
บทเรียน “การเพิ่มความสามารถแบบค่อยเป็นค่อยไปสำหรับแบบฟอร์ม” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Sveltejs Academy นี้ได้ไหม
ได้ บทเรียน Sveltejs Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- +page.server.js พร้อม actions
- คำสั่ง use:enhance
- การเพิ่มความสามารถแบบค่อยเป็นค่อยไปสำหรับแบบฟอร์ม
- การจัดการข้อผิดพลาดจากการตรวจสอบใน Actions