การสร้างฟอร์มHTML
บทนำ
การสร้างแบบฟอร์ม (Form) เพื่อใช้ในการรับข้อมูลเป็นวิธีการหนึ่งที่นิยมทำกันในเว็บไซต์ทั่วไป เพราะการสร้างแบบฟอร์มจะทำให้กรอกข้อมูลได้ง่ายเป็นระเบียบสวยงาม และเป็นสัดส่วน ตัวอย่างแบบฟอร์มที่ใช้กันทั่วไปเช่นการกรอกข้อมูลในการสมัครสมาชิกต่าง ๆ การแสดงความคิดเห็น การกรอกแบบสอบถาม สิ่งเหล่านี้ถือได้ว่าเป็นการรับข้อมูลผ่านฟอร์มทั้งสิ้น การออกแบบฟอร์มให้มีลักษณะต่าง ๆ ขึ้นอยู่กับประโยชน์ในการใช้งานของ
1. รูปแบบการสร้าง Form
การสร้างแบบฟอร์ม (Form) ควบคุมด้วยแท็ก FORM และ INPUT โดยมีรูปแบบดังนี้
2. ตัวอย่างการสร้าง Form แบบต่าง ๆ
2.1 การสร้างที่ใส่ชื่อ
Username :
2.2 การสร้าง password
Password :
2.3 แปลความหมาย
คือการใส่ค่า Form ที่ต้องการเช่นต้องการ Form ใส่ชื่อ ก็ให้ใส่ Type ไว้ว่า Text
หรือจะใส่ password ก็ให้ใส่ Type ไว้ว่า password
ใส่ขนาดความกว้างของ Form ค่าเป็นตัวเลข เช่น 15
ขนาดความจุของตัวอักษรซึ่งถ้าเกินจำนวนที่ระบุจะไม่กรอกเข้าไปใน input มีค่าเป็นตัวเลข เช่น 25
2.4 การสร้างปุ่ม Button
การสร้างปุ่ม Button ใน Form สามารถทำได้ทั้งปุ่มส่งหรือรับข้อมูล (Submit) และปุ่มยกเลิกการทำงานหรือ Reset
แปลความหมาย
type ของการส่งคือ submit และ type ของการรีเซ็ตคือ reset ส่วน name เป็นการกำหนดชื่อข้อมูลเพื่อส่งไปประมวลผล
2.5 การสร้างปุ่ม Checkbox
checkbox เป็นรูปแบบการเลือกชนิดเลือกได้หลายรายการ มีประโยชน์มากในการสร้างตัวเลือกที่ไม่จำเป็นต้องพิมพ์ข้อมูลลงไป เพียงแต่คลิกเลือกที่ปุ่มนั้นๆ ก็เป็นการกรอกเพื่อรับข้อมูล ปุ่มแบบ checkbox สามารถกำหนดค่าได้หลายค่าหรือเลือกได้หลายตัวเลือก
รูปแบบ
ตัวอย่าง
รายได้มากกว่า30000บาท
2.6 การสร้างปุ่ม Radiobox
รูปแบบจะคล้ายๆกับ checkbox เพียงแต่สามารถเลือกข้อมูลเพียงตัวเลือกเดียวเท่านั้นเหมาะสำหรับนำไปใช้การเลือกคำถามที่มีตัวเลือก 2 ตัวเลือกเช่นแบบทดสอบ หรือ เลือกเพศ เป็นต้น
รูปแบบ
ตัวอย่าง
เพศชาย
เพศหญิง
2.7 การสร้างที่กรอกข้อความที่มีจำนวนมาก ๆ
การสร้างฟอร์มรับข้อมูลแสดงความคิดเห็นจะใช้คำสั่ง TEXT AREA ในการรับข้อมูลที่มีความยาวมากกว่าหนึ่งบรรทัด
โดยมีรูปแบบคำสั่งดังนี้
ตัวอย่าง
สามารถเพิ่มขนาดของ Textarea ได้โดยไปตั้งค่าที่ Rows หรือ Cols
2.8 การสร้างดรอปดาวน์ลิสต์ (Drop Drown List)
การสร้างดรอปดาวน์ลิสต์ (Drop Drown List) เป็นการรับข้อมูลจากการคลิกเมาส์เลือกรายการ ที่กำหนดไว้ โดยจะเลือกได้เพียงหนึ่งรายการ โดยมีรูปแบบการใช้คำสั่งดังนี้