1. หน่วยที่ 10
การสร้างแบบฟอร์ม

2. เข้าใจรูปแบบการทางานของฟอร์มและ CGI
CGI หรือ Common Gateway Interface ไม่ใช่ภาษาโปรแกรมมิง แต่เป็นวิธีมาตรฐานในการติดต่อสื่อสารระหว่างฟอร์ม HTML
กับโปรแกรมที่เราเขียนขึ้นซึ่งโปรแกรมที่เราเขียนนั้นสามารถเขียนขึ้นมาได้จากหลายๆภาษา เช่น C, Peri , Java และ Basic
หน้าที่ของโปรแกรมที่เราเขียนขึ้นมา จะทาหน้าที่รับส่งข้อมูลฟอร์ม และจัดการเก็บข้อมูลนั้น เช่น นาข้อมูลจัดเก็บลงตาราง
ฐานข้อมูล จากนั้นจึงส่งผลลัพธ์การทางานเป็นภาษา HTML กลับไปที่บราวเซอร์ เพื่อแจ้งให้ทราบนี้ได้ดาเนินการเสร็จสมบรู์์แล้ว
1. เมื่อผู้ใช้ป้อนข้อมูลในแบบฟอร์มเสร็จสิ้นจากนั้นคลิกปุ่มส่งเพื่อส่งแบบฟอร์มไปที่โปรแกรมCGI Program
2. โปรแกรมรับข้อมูล ในที่นี้คือคาที่เราค้นหา โปรแกรมจะนาคาเหล่นนั้นไปค้นจากในฐานข้อมูลที่เก็บไว้
3. จากนั้นโปรแกรม จะนาข้อมูลที่ค้นหาพบมาใส่ในรูปแบบแท็ก HTML และส่งกลับมาที่บราวเซอร์ให้ผู้ใช้ได้เห็นผลลัพธ์การ
ทางานของ CGI
จากตัวอย่างการทางาน จึงสรุปได้สั้นๆ ดังนี้
. CFI ไม่ใช่โปรแกรม แต่วิธีหรือขบวนการทาให้เว็บเพจสามารถเรียกโปรแกรมอื่นๆมาทางานได้
. CGI Script, CGI Program คือโปรแกรมที่ถูก CGI เรียกขึ้นมาทางาน

3. การสร้างแบบฟอร์ม <form>
เราต้องการใช้แท็ก from เพื่อสร้างแบบฟอร์มในเว็บเพจ
อุปกรณ์ในการรับข้อมูล <input>
การสร้างอุปกร์์รับข้อมูลจะเขียนอยู่ภายในแท็ก <form>…</form> โดยใช้แท็ก input ดังนี้

4. ช่องรับข้อความแถวเดียว (text)
ในการสร้างช่องรับข้อความแถวเดียว เราจะกาหนด type=”text”ดังนี้
ปรับขนาดช่องรับข้อความแถวเดียว
ข้อมูลที่เราใช้กรอกลงไปนั้นอาจมีความยสงไม่เท่ากัน เราสามารถปรับขนาดของช่องให้เหมาะสมกับเนื้อหาที่เราแสดงดังนี้

5. กาหนดจานวนอักษรที่ให้พิมพ์ลงไปได้
เราสามารถกาหนดตัวอักษรที่พิมพ์ลงไปได้เช่น กาหนดให้พิมพ์เพียง 5 ตัวอักษรเท่านั้น หากเกินจะไม่รับตัวอักษรนั้น
ช่องรับข้อความแถวเดียวแบบรหัสผ่าน (Password)
ทาหน้าที่เช่นเดียวกับช่องรับข้อความธรรมดา
แต่ตัวอกษรที่พิมพ์ลงไปจะแสดง
ด้วยเครื่องหมาย *หรือ . แทน

6. การสร้างปุ่ ม
ในฟอร์มต้องมีปุ่มให้กด จะมี 3 ลักษ์ะ คือ
. ปุ่ม Submit เมื่อกดปุ่มนี้ข้อมูลในฟอร์มทั้งหมดจะถูกส่งไปให้ CGI ที่กาหนดไว้ในแอตทริบิวต์ action ของแท็ก form
. ปุ่ม Reset เมื่อกดปุ่มนี้อุปกร์์ในฟอร์มทั้งหมดจะกลับสู่ค่าเริ่มต้น ก่อนที่เราจะพิมพ์ข้อมูลใดๆลงฟอร์ม
. ปุ่ม Button เป็นปุ่มที่สร้างขึ้นมาเพื่อทางานใดๆ โดยจะไปเรียก JavaScript หรือVBScript ขึ้นมาทางาน เช่น ปุ่มแสดงปิิทิน เมื่อ
คลิกปุ่มนี้ฟอร์มของเราจะแสดงปิิทินให้คลิกเลือกวันที่ต้องการ วันที่นั้นก็จะพิมพ์ลงฟอร์มให้กับเรา
จากตัวอย่างถ้าเรากดปุ่ม OK ข้อมูลในฟอร์มจะถูกส่งไปให้โปรแกรม CGI ที่กาหนดไว้ในแอตทริบิวต์ จากจากตัวอย่างเราไม่ได้
กาหนดไว้จึงขึ้นหน้าแจ้งให้ทราบว่าหาไฟล์CGI ดังกล่าวไม่พบ

7. ถ้าเรากดปุ่ม Clear ข้อมูลที่กรอกลงอุปกร์์ทั้งหมดจะกลับสู่เริ่มต้น
ถ้าเรากดปุ่ม Click mel จะเรียกภาษาสคริปต์ให้ทางาน จากตัวอย่าง Click mel ถูกกดจะปรากกหน้าต่างแสดงข้อความว่า Hello
how are you ?
สาหรับสคริปต์ที่เรากาหนดปุ่มให้ Click mel จะไม่ใช่สคริปต์ที่ทางานที่ฝั่งเซิร์ฟเวอร์แล้วแต่จะเป็นสคริปต์ที่ทางานฝั่ง
ไคลเอนต์หรืฝั่งบราวเซอร์นั้นเอง
จากตัวอย่างเราจะเห็นแอตทริบิวต์อีกตัวหนึ่ง คือ แอตทริบิวต์ Value เป็นแอตทริบิวต์ที่กาหนดค่าให้กับอุปกร์์ทุกๆ ตัวใน
ฟอร์ม
ถ้าเรากาหนดแอตทริบิวต์ให้ช่องรับข้อความ (<input type=”text”>)เมื่อเราเปิดเว็บเพจเราจะเห็นค่าที่เราระบุในแอตทริบิวต์
Value ปรากิขึ้นในช่องรับข้อความทันที และเราสามารถแก้ไขค่าเริ่มต้นนี้ได้
ถ้าเรากาหนแอตทริบิวต์ Value ให้กดปุ่มใดๆ (<input type=”submit,reset, button”>) ค่าในแอตทริบิวต์Value จะใช้เป็นขื่อ
ของปุ่มนั้น เช่น OK Clear ในตัวอย่างที่ผ่านมา

8. การสร้างปุ่ มโดยใช้ภาพ(image)
ถ้าเราต้องการให้ฟอร์มของเรามีปุ่มที่แปลกไม่ซ้าใคร เราสามารถสร้างไฟล์ภาพเป็นรูปปุ่ม แล้วใช้ไฟล์นั้นทาปุ่มกดได้
สาหรับการใช้งานภาพปุ่ม เราต้องเขียนสคริปต์ฝั่งไคลเอนต์Client-SideScript ขึ้นมาเพื่อควมคุมการทางานของปุ่มนั้น

9. ช่องรับข้อมูลประเภทไฟล์ (file)
ถ้าเราเคยใช้อีเมล์ฟรี และเคยส่งไฟล์แนบไปกับเมล์ ต้องรู้จักอุปกร์์ตัวนี้ ซึ่งเป็นช่องลักษ์ะเป็นช่องข้อความอยู่ข้างๆ เป็นปุ่ม Browse ใช้เพื่อ
เลือกไฟล์ที่ต้องการส่งไปกับฟอร์มนั้น เมื่อเรากดปุ่ม Submit ไฟล์นั้นก็จะถูกส่งไปพร้อมกับข้อมูลในอุปกร์์ตัวอื่นๆ ที่อยู่ในฟอร์ม

10. ตัวเลือกแบบให้เลือกหลายข้อ (Checkbox)
หากเราเคยทาแบบทกสอบผ่านทางอินเทอร์เน็ต ที่คาถามบอกเราสามารถเลือกคาตอบได้มากกว่า 1 ข้อคาถามแบบนี้จะใช้
อุปกร์์ที่เรียกว่าเซ็กบ็อกช์
เซ็กบ็อกซ์ จะเป็นอุปกร์์ที่มี 2 สถานะ คือ ใช่หรือไม่ เลือกหรือไม่เลือก เราสามารถใช้เซ็กบ็อกซ์ในกร์ีที่ต้องการให้กรอก
แบบฟอร์มหลายๆ ตัวเลือกพร้อมกันได้
เราสามารถกาหนดให้ถูกกาตั้งแต่เริ่มต้นได้checked=”checked”

11. ตัวเลือกแบบให้เลือกข้อเดียว
จะตรงข้ามกับเซ็กบ็อกซ์ เพราะเรดิโอบัตทอน จะให้ผู้ใช้เลือกเพียงข้อเดียวจากตัวเลือกทั้งหมด เช่นถ้าเลือก ก. แล้วเปลี่ยนไป
เลือก ข. ก.ที่เคยเลือกก็จะไปเลือก ข. เป็นต้น
ตัวเลือกแบบนี้เรามักจะเห็นในแบบทดสอบ หรือประเมินสิ่งใดสิ่งหนึ่ง
จากตัวอย่างจะแบ่งการทางานเป็น 2 ชุด เรดิโอบิตทอนที่ใช้เลือกเพศ เรดิโอบิตทอนที่ใช้เลือกอายุ ทั้ง 2 ชุดจะแยกการทางาน
โดยใช้แอตทริบิวต์ Name จะเลือกได้เพียงตัวเลือกเดียวจากทั้งหมด ถึงแม้ว่าจะมี 3 ตัวเลือกเราก็จะสามารถเลือกได้เพียง 1 ตัวเลือก
เช่นเดียวกับเซ็กบ็อกซ์ เราสามารถใช้checked=”checked” เพื่อกาหนดตัวเลือกตั้งแต่เมต้น

12. อุปกรณ์เก็บข้อมูลแบบซ่อน
เป็นอุปกร์์ที่เราใช้สาหรับเก็บค่าใดๆ ที่เราต้องการส่งไปพร้อมกับข้อมูลที่กรอกลงฟอร์ม เช่น ข้อมูลระบบคอมพิวเตอร์ วัน
เวลาที่กรอกข้อมูล เลขทะเบียนแบบฟอร์ม เป็นต้น
ข้อมูลเหล่านี้จะมีอยู่ในระบบปิิบัติการอยู่แล้ว เราสามารถเรียกใช้ผ่านภาษาสคริปต์ไคลเอนต์และเราจะนาข้อมูลเหล่านี้มาเก็บ
ในอุปกร์์ Hidden
อุปกร์์ Hidden จะไม่มีหน้าตาแสดงเหมือนบราวเซอร์ แต่เมื่อกดปุ่ม Submit ค่าในอุปกร์์จะถูกส่งไปที่เซิร์ฟเวอร์พร้อมๆกับ
ค่าค่าในอุปกร์์ตัวอื่นๆ ในฟอร์ม

13. ช่องรับข้อความแบบหลายบรรทัด
ในกร์ีที่มีข้อมูลที่ต้องป้อนในฟอร์มมากกว่า 1บรรทัด เราสามารถใช้แท็ก textareaได้โดยใช้แท็ก
ตัวอย่างการสร้างช่องรับข้อความแบบหลายบรรทัด
กาหนดการตัดคา
ปกติเราจะพิมพ์ประโยชน์ยาวๆ แท็กจะตัดคาขึ้นบรรทัดใหม่ให้เราเอง แต่ถ้าเราไม่ต้องการให้มีการตัดคา หรือต้องการตัดคา
เองตาแหน่งที่เราต้องการ เราสามารถทาได้โดยใช้แอตทริบิวต์ Wrap
ตัวอย่างการกาหนดให้ไม่มีการตัดคา

14. ตัวเลือกรายการ <Select>,<option>
ตัวเลือกรายการ หรือการใช้Select เป็นอุปกร์์ที่ใช้แสดงข้อมูลให้ผู้เหลือเพียง 1 ข้อมูลจากข้อมูลทั้งหมด คล้ายเรดิโอบัต
ทอนแต่จะประหยัดพื้นที่ในการแสดงผลมากกว่า
ตัวอย่างการใช้Select
กาหนดตัวเลือดเริ่มต้น
เราสามารถกาหนดตัวเลือกที่ถูกเลือกไว้ล่วงหน้าได้ โดยกาหนดแอตทริบิวต์ selected=”elected”

15. ตัวเลือกรายการแบบจัดกลุ่ม <potgroup>
ในกร์ีที่ตัวเลือกมีจานวนมาก การแบ่งกลุ่มให้ตัวเลือกจะช่วยให้เราไม่สับสนในการเลือกข้อมูล และทาให้มีความเป็นระเบียบ
เรียบร้อยอีกด้วย
ตัวอย่างการใช้ตัวเลือกแบบจัดกลุ่ม

16. ตัวเลือกรายการแบบหลายบรรทัด
จากตัวอย่างก่อนหน้า เราได้สร้างตัวเลือกหลายบรรทัดซึ่งประหยัดเนื้อที่ แต่ถ้าเราต้องสร้างตัวเลือกรายการแบบหลายบรรทัด
ที่มีการแสดงรายการมากกว่า 1 รายการในคราวเดียว เราจะใช้แอตทริบิวต์ size
ตัวอย่างการใช้ตัวเลือกแบบหลายบรรทัด

17. การจัดแบ่งแบบฟอร์ม <fieldset>,<legend>,<label>
ถ้าเว็บเพจของเรามีอุปกร์์ให้กรอกข้อมูลหลายๆตัว
การจัดแบ่งกลุ่มของอุปกร์์จะช่วยให้ฟอร์มดูดี และ
เข้าใจขอบเขตการกรอกได้มากยิ่งขึ้น การจัดแบ่งกลุ่ม
หรือการจัดแบ่งฟอร์มเราจะใช้แท็ก fieldset ดังนี้
ตัวอย่างการจัดแบ่งฟอร์ม