:: เมนูหลัก
 แบบทดสอบก่อนเรียน
 หน่วยที่ 1 โลกของเว็บเพจและเว็บไซต์
 หน่วยที่ 2 เริ่มต้นกับ HTML
 หน่วยที่ 3 การจัดการข้อความ
 หน่วยที่ 4 การใช้ลิสต์สร้างรายการ
 หน่วยที่ 5 การแทรกภาพ
 หน่วยที่ 6 การสร้างตาราง
 หน่วยที่ 7 การเชื่อมโยงเว็บเพจด้วยลิงค์
หน่วยที่ 8 การใช้งานไฟล์วีดีโอและเสียง
 หน่วยที่ 9 การสร้างฟอร์ม
 แบบทดสอบก่อนเรียน
แบบฟอร์มป้อนข้อมูล
การสร้างฟอร์มชนิด Text Box
 การสร้างฟอร์มชนิด password
 การสร้างฟอร์มชนิด Check Box
 การสร้างฟอร์มชนิด Radio Button
 การสร้างฟอร์มชนิดแนบ File
 การสร้างฟอร์มชนิด Text Area
 การสร้างฟอร์มชนิด Selection Box
 การสร้างปุ่มชนิด reset และ submit
 แบบฝึกหัด
 แบบทดสอบหลังเรียน
 แบบทดสอบหลังเรียนเรียน
:: หน่วยที่ 9 การสร้างฟอร์ม
แบบฟอร์มป้อนข้อมูล


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

โครงสร้าง Element สำหรับสร้างแบบฟอร์ม

<form name="form_name" method="get | post" action="url" target="window name">

            ....

</form>

ในการสร้างฟอร์ม จะมีความคล้ายคลึงกับการสร้างตาราง โดยจะอยู่ในแท็ก body ที่เริ่มจากแท็กคำสั่งเริ่มต้นถัดมาก็จะเป็นอิลเม็นต์ต่างๆ ที่เกี่ยวข้อง โดยแท็กเริ่มต้นของการสร้างฟอร์มคือ <from>...<from> และการสร้างฟอร์มจะมีแอตทริบิวต์อยุ่ 4 ตัว ที่ต้องกำหนดในการสร้างฟอร์ม

- name="ชื่อของ Form"
- method="get | post" เป็นรูปแบบของวิธีในการส่งข้อมูล มี 2 รูปแบบ
                                    get เป็นตัวรับ - ส่ง ข้อมูลขนาดจำกัดจาก Server ไม่เกิน 256 ตัวอักษร
                                    post เป็นตัวรับ - ส่ง ข้อมูลไม่จำกัดจาก Server
- action="URL" คือตำแหน่งหรือ URL ของ Script ที่วางไว้ที่ Server
- target="_blank | _self | _parent" หน้าต่างที่จะให้ผลของ Script แสดงผล

ภายใน Element <form>...</form> จะประกอบด้วยช่อง element 3 ประเภท คือ

1. <input>...</input>

2. <select>...</select>

3. <textarea>

ซึ่งจะเป็นรูปแบบการป้อนข้อมูลในรูปแบบต่าง ๆ สามารถเลือกใช้ได้ตามความเหมาะสมและง่ายต่อผู้ใช้งาน