Skip to main content

การใช้งาน Progress Bar แสดง เปอร์เซ็นต์ การกรอกแบบฟอร์ม HTML

ในตัวอย่างนี้เราขอนำเสนอ การสร้าง ฟอร์ม HTML ตัวเลือกแบบสอบถามอย่างง่าย ๆ ซึ่งจะใช้ input ที่ มี Type เป็น radio โดยเราจะเพิ่มการแสดง Progress Bar
เปอร์เซ็นต์ การ เลือก ตอบคำถาม ว่าผู้ตอบคำถามได้ตอบคำถามไปแล้วกี่เปอร์เซ็นต์
สามารถนำไปประยุกต์ใช้กับการกรอกแบบฟอร์มในรูปแบบต่าง ๆ ได้

progressBar

ไปดูตัวอย่างกันเลย   Demo Form Progress Bar

มาเริ่มกันเลย

1.สร้างไฟล์  index.html นำเข้า javascript และ Css ที่จำเป็น

2.เพิ่มเติมไฟล์ index.html  เรียกใช้ class progress-bar จาก Bootstrap และ สร้างฟอร์ม  Html

3.เขียน Script ตรวจสอบการ เลือกข้อคำถาม และ แสดง Progress Bar ใน แบบฟอร์ม

Demo     Download Source Code