หน่�วยที่�� 10 การสร�างแบบฟอร�ม

เข้�าใจร�ปแบบการที่�างาน่ข้องฟอร�มและ CGI CGI หรื�อ Common Gateway Interface ไม่�ใช่�ภาษาโปรืแกรืม่ม่�ง แต่�เป�นวิ�ธี�ม่าต่รืฐานใน

การืต่�ดต่�อสื่��อสื่ารืรืะหวิ�างฟอรื!ม่ HTML ก"บโปรืแกรืม่ที่��เรืาเขี�ยนขี'(นซึ่'�งโปรืแกรืม่ที่��เรืาเขี�ยนน"(นสื่าม่ารืถเขี�ยนขี'(นม่าได+จากหลายๆ ภาษา เช่�น C,

Peri , Java และ Basic หน+าที่��ขีองโปรืแกรืม่ที่��เรืาเขี�ยนขี'(นม่า จะที่/าหน+าที่��รื "บสื่�งขี+อม่0ลฟอรื!ม่ และจ"ดการืเก1บขี+อม่0ลน"(น เช่�น

น/าขี+อม่0ลจ"ดเก1บลงต่ารืางฐานขี+อม่0ล จากน"(นจ'งสื่�งผลล"พธี!การืที่/างานเป�นภาษา HTML กล"บไปที่��บรืาวิเซึ่อรื! เพ��อแจ+งให+ที่รืาบน�(ได+

ด/าเน�นการืเสื่รื1จสื่ม่บรื0ณ์!แล+วิ 1. เม่��อผ0+ใช่+ป5อนขี+อม่0ลในแบบฟอรื!ม่เสื่รื1จสื่�(นจากน"(นคล�กป78ม่สื่�งเพ��อสื่�งแบบฟอรื!ม่ไปที่��โปรืแกรืม่ CGI

Program2. โปรืแกรืม่รื"บขี+อม่0ล ในที่��น�(ค�อค/าที่��เรืาค+นหา โปรืแกรืม่จะน/าค/าเหล�นน"(นไปค+นจากในฐานขี+อม่0ลที่��เก1บไวิ+3. จากน"(นโปรืแกรืม่ จะน/าขี+อม่0ลที่��ค+นหาพบม่าใสื่�ในรื0ปแบบแที่1ก HTML และสื่�งกล"บม่าที่��บรืาวิเซึ่อรื!ให+ผ0+

ใช่+ได+เห1นผลล"พธี!การืที่/างานขีอง CGI จากต่"วิอย�างการืที่/างาน จ'งสื่รื7ปได+สื่" (นๆ ด"งน�(. CFI ไม่�ใช่�โปรืแกรืม่ แต่�วิ�ธี�หรื�อขีบวินการืที่/าให+เวิ1บเพจสื่าม่ารืถเรื�ยกโปรืแกรืม่อ��นๆม่าที่/างานได+. CGI Script, CGI Program ค�อโปรืแกรืม่ที่��ถ0ก CGI เรื�ยกขี'(นม่าที่/างาน

การสร�างแบบฟอร�ม <form> เรืาต่+องการืใช่+แที่1ก from เพ��อสื่รื+างแบบฟอรื!ม่ในเวิ1บเพจ

อ�ปกรณ์�ใน่การร!บข้�อม�ล <input> การืสื่รื+างอ7ปกรืณ์!รื"บขี+อม่0ลจะเขี�ยนอย0�ภายในแที่1ก <form>…</form> โดยใช่+แที่1ก

input ด"งน�(

ช่�องร!บข้�อความแถวเดี�ยว (text) ในการืสื่รื+างช่�องรื"บขี+อควิาม่แถวิเด�ยวิ เรืาจะก/าหนด type=”text” ด"งน�(

ปรื"บขีนาดช่�องรื"บขี+อควิาม่แถวิเด�ยวิ ขี+อม่0ลที่��เรืาใช่+กรือกลงไปน"(นอาจม่�ควิาม่ยสื่งไม่�เที่�าก"น เรืาสื่าม่ารืถปรื"บขีนาดขีองช่�องให+

เหม่าะสื่ม่ก"บเน�(อหาที่��เรืาแสื่ดง ด"งน�(

ก�าหน่ดีจ�าน่วน่อ!กษรที่��ให�พิ(มพิ�ลงไปไดี� เรืาสื่าม่ารืถก/าหนดต่"วิอ"กษรืที่��พ�ม่พ!ลงไปได+ เช่�น ก/าหนดให+พ�ม่พ!เพ�ยง 5 ต่"วิอ"กษรื

เที่�าน"(น หากเก�นจะไม่�รื"บต่"วิอ"กษรืน"(น

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

การสร�างป�+ม ในฟอรื!ม่ต่+องม่�ป78ม่ให+กด จะม่� 3 ล"กษณ์ะ ค�อ . ป78ม่ Submit เม่��อกดป78ม่น�(ขี+อม่0ลในฟอรื!ม่ที่"(งหม่ดจะถ0กสื่�งไปให+ CGI ที่��ก/าหนดไวิ+ใน

แอต่ที่รื�บ�วิต่! action ขีองแที่1ก form . ป78ม่ Reset เม่��อกดป78ม่น�(อ7ปกรืณ์!ในฟอรื!ม่ที่"(งหม่ดจะกล"บสื่0�ค�าเรื��ม่ต่+น ก�อนที่��เรืาจะพ�ม่พ!ขี+อ

ม่0ลใดๆลงฟอรื!ม่ . ป78ม่ Button เป�นป78ม่ที่��สื่รื+างขี'(นม่าเพ��อที่/างานใดๆ โดยจะไปเรื�ยก JavaScript

หรื�อVBScript ขี'(นม่าที่/างาน เช่�น ป78ม่แสื่ดงปฏิ�ที่�น เม่��อคล�กป78ม่น�(ฟอรื!ม่ขีองเรืาจะแสื่ดงปฏิ�ที่�นให+คล�กเล�อกวิ"นที่��ต่+องการื วิ"นที่��น" (นก1จะพ�ม่พ!ลงฟอรื!ม่ให+

ก"บเรืา

จากต่"วิอย�างถ+าเรืากดป78ม่ OK ขี+อม่0ลในฟอรื!ม่จะถ0กสื่�งไปให+โปรืแกรืม่ CGI ที่��ก/าหนดไวิ+ในแอต่ที่รื�บ�วิต่! จากจากต่"วิอย�างเรืาไม่�ได+ก/าหนดไวิ+ จ'งขี'(นหน+าแจ+งให+ที่รืาบวิ�าหาไฟล! CGI ด"งกล�าวิไม่�พบ

ถ+าเรืากดป78ม่ Clear ขี+อม่0ลที่��กรือกลงอ7ปกรืณ์!ที่"(งหม่ดจะกล"บสื่0�เรื��ม่ต่+น ถ+าเรืากดป78ม่ Click mel จะเรื�ยกภาษาสื่ครื�ปต่!ให+ที่/างาน จากต่"วิอย�าง Click mel ถ0กกดจะ

ปรืากกหน+าต่�างแสื่ดงขี+อควิาม่วิ�า Hello how are you ? สื่/าหรื"บสื่ครื�ปต่!ที่��เรืาก/าหนดป78ม่ให+ Click mel จะไม่�ใช่�สื่ครื�ปต่!ที่��ที่/างานที่��ฝั่;� งเซึ่�รื!ฟเวิอรื!แล+วิแต่�

จะเป�นสื่ครื�ปต่!ที่��ที่/างานฝั่;� งไคลเอนต่! หรื�ฝั่;� งบรืาวิเซึ่อรื!น"(นเอง จากต่"วิอย�างเรืาจะเห1นแอต่ที่รื�บ�วิต่!อ�กต่"วิหน'�ง ค�อ แอต่ที่รื�บ�วิต่! Value เป�นแอต่ที่รื�บ�วิต่!ที่��

ก/าหนดค�าให+ก"บอ7ปกรืณ์!ที่7กๆ ต่"วิในฟอรื!ม่ ถ+าเรืาก/าหนดแอต่ที่รื�บ�วิต่!ให+ช่�องรื"บขี+อควิาม่ (<input type=”text”>) เม่��อเรืาเป<ด

เวิ1บเพจเรืาจะเห1นค�าที่��เรืารืะบ7ในแอต่ที่รื�บ�วิต่! Value ปรืากฏิขี'(นในช่�องรื"บขี+อควิาม่ที่"นที่� และเรืาสื่าม่ารืถแก+ไขีค�าเรื��ม่ต่+นน�(ได+ ถ+าเรืาก/าหนแอต่ที่รื�บ�วิต่! Value ให+กดป78ม่ใดๆ (<input type=”submit, reset,

button”>) ค�าในแอต่ที่รื�บ�วิต่! Value จะใช่+เป�นขี��อขีองป78ม่น"(น เช่�น OK Clear ในต่"วิอย�างที่��ผ�านม่า

การสร�างป�+มโดียใช่�ภาพิ (image) ถ+าเรืาต่+องการืให+ฟอรื!ม่ขีองเรืาม่�ป78ม่ที่��แปลกไม่�ซึ่/(าใครื เรืาสื่าม่ารืถสื่รื+างไฟล!ภาพเป�นรื0ป

ป78ม่ แล+วิใช่+ไฟล!น"(นที่/าป78ม่กดได+

สื่/าหรื"บการืใช่+งานภาพป78ม่ เรืาต่+องเขี�ยนสื่ครื�ปต่!ฝั่;� งไคลเอนต่! Client-Side Script ขี'(นม่าเพ��อควิม่ค7ม่การืที่/างานขีองป78ม่น"(น

ช่�องร!บข้�อม�ลประเภที่ไฟล� (file) ถ+าเรืาเคยใช่+อ�เม่ล!ฟรื� และเคยสื่�งไฟล!แนบไปก"บเม่ล! ต่+องรื0 +จ"กอ7ปกรืณ์!ต่"วิน�( ซึ่'�งเป�นช่�องล"กษณ์ะ

เป�นช่�องขี+อควิาม่อย0�ขี+างๆ เป�นป78ม่ Browse ใช่+เพ��อเล�อกไฟล!ที่��ต่+องการืสื่�งไปก"บฟอรื!ม่น"(น เม่��อเรืากดป78ม่ Submit ไฟล!น"(นก1จะถ0กสื่�งไปพรื+อม่ก"บขี+อม่0ลใน

อ7ปกรืณ์!ต่"วิอ��นๆ ที่��อย0�ในฟอรื!ม่

ตั!วเล/อกแบบให�เล/อกหลายข้�อ (Checkbox) หากเรืาเคยที่/าแบบที่กสื่อบผ�านที่างอ�นเที่อรื!เน1ต่ ที่��ค/าถาม่บอกเรืาสื่าม่ารืถเล�อกค/า

ต่อบได+ม่ากกวิ�า 1 ขี+อค/าถาม่แบบน�(จะใช่+อ7ปกรืณ์!ที่��เรื�ยกวิ�าเซึ่1กบ1อกช่! เซึ่1กบ1อกซึ่! จะเป�นอ7ปกรืณ์!ที่��ม่� 2 สื่ถานะ ค�อ ใช่�หรื�อไม่� เล�อกหรื�อไม่�เล�อก เรืาสื่าม่ารืถใช่+

เซึ่1กบ1อกซึ่!ในกรืณ์�ที่��ต่+องการืให+กรือกแบบฟอรื!ม่หลายๆ ต่"วิเล�อกพรื+อม่ก"นได+

เรืาสื่าม่ารืถก/าหนดให+ถ0กกาต่"(งแต่�เรื��ม่ต่+นได+ checked=”checked”

ตั!วเล/อกแบบให�เล/อกข้�อเดี�ยว จะต่รืงขี+าม่ก"บเซึ่1กบ1อกซึ่! เพรืาะเรืด�โอบ"ต่ที่อน จะให+ผ0+ใช่+เล�อกเพ�ยงขี+อเด�ยวิจากต่"วิ

เล�อกที่"(งหม่ด เช่�นถ+าเล�อก ก. แล+วิเปล��ยนไปเล�อก ขี. ก.ที่��เคยเล�อกก1จะไปเล�อก ขี. เป�นต่+น ต่"วิเล�อกแบบน�(เรืาม่"กจะเห1นในแบบที่ดสื่อบ หรื�อปรืะเม่�นสื่��งใดสื่��งหน'�ง จากต่"วิอย�างจะแบ�งการืที่/างานเป�น 2 ช่7ด เรืด�โอบ�ต่ที่อนที่��ใช่+เล�อกเพศ เรืด�โอบ�ต่ที่อนที่��

ใช่+เล�อกอาย7 ที่" (ง 2 ช่7ดจะแยกการืที่/างานโดยใช่+แอต่ที่รื�บ�วิต่! Name จะเล�อกได+เพ�ยงต่"วิเล�อกเด�ยวิจากที่"(งหม่ด ถ'งแม่+วิ�าจะม่� 3 ต่"วิ

เล�อกเรืาก1จะสื่าม่ารืถเล�อกได+เพ�ยง 1 ต่"วิเล�อก เช่�นเด�ยวิก"บเซึ่1กบ1อกซึ่! เรืาสื่าม่ารืถใช่+ checked=”checked” เพ��อก/าหนดต่"วิเล�อก

ต่"(งแต่�เม่ต่+น

อ�ปกรณ์�เก0บข้�อม�ลแบบซ่�อน่ เป�นอ7ปกรืณ์!ที่��เรืาใช่+สื่/าหรื"บเก1บค�าใดๆ ที่��เรืาต่+องการืสื่�งไปพรื+อม่ก"บขี+อม่0ลที่��กรือกลง

ฟอรื!ม่ เช่�น ขี+อม่0ลรืะบบคอม่พ�วิเต่อรื! วิ"นเวิลาที่��กรือกขี+อม่0ล เลขีที่ะเบ�ยนแบบฟอรื!ม่ เป�นต่+น ขี+อม่0ลเหล�าน�(จะม่�อย0�ในรืะบบปฏิ�บ"ต่�การือย0�แล+วิ เรืาสื่าม่ารืถเรื�ยกใช่+ผ�านภาษาสื่ครื�ปต่!ไคล

เอนต่! และเรืาจะน/าขี+อม่0ลเหล�าน�(ม่าเก1บในอ7ปกรืณ์! Hidden อ7ปกรืณ์! Hidden จะไม่�ม่�หน+าต่าแสื่ดงเหม่�อนบรืาวิเซึ่อรื! แต่�เม่��อกดป78ม่ Submit ค�า

ในอ7ปกรืณ์!จะถ0กสื่�งไปที่��เซึ่�รื!ฟเวิอรื!พรื+อม่ๆก"บค�าค�าในอ7ปกรืณ์!ต่"วิอ��นๆ ในฟอรื!ม่

ช่�องร!บข้�อความแบบหลายบรรที่!ดี ในกรืณ์�ที่��ม่�ขี+อม่0ลที่��ต่+องป5อนในฟอรื!ม่ม่ากกวิ�า 1บรืรืที่"ด เรืาสื่าม่ารืถใช่+แที่1ก

textarea ได+โดยใช่+แที่1กต่"วิอย�างการืสื่รื+างช่�องรื"บขี+อควิาม่แบบหลายบรืรืที่"ด

ก�าหน่ดีการตั!ดีค�า ปกต่�เรืาจะพ�ม่พ!ปรืะโยช่น!ยาวิๆ แที่1กจะต่"ดค/าขี'(นบรืรืที่"ดใหม่�ให+เรืาเอง แต่�ถ+าเรืาไม่�

ต่+องการืให+ม่�การืต่"ดค/า หรื�อต่+องการืต่"ดค/าเองต่/าแหน�งที่��เรืาต่+องการื เรืาสื่าม่ารืถที่/าได+โดยใช่+แอต่ที่รื�บ�วิต่! Wrapต่"วิอย�างการืก/าหนดให+ไม่�ม่�การืต่"ดค/า

ตั!วเล/อกรายการ <Select>,<option>

ต่"วิเล�อกรืายการื หรื�อการืใช่+ Select เป�นอ7ปกรืณ์!ที่��ใช่+แสื่ดงขี+อม่0ลให+ผ0+เหล�อเพ�ยง 1 ขี+อม่0ลจากขี+อม่0ลที่"(งหม่ด คล+ายเรืด�โอบ"ต่

ที่อนแต่�จะปรืะหย"ดพ�(นที่��ในการืแสื่ดงผลม่ากกวิ�า ต่"วิอย�างการืใช่+ Select

ก�าหน่ดีตั!วเล/อดีเร(�มตั�น่ เรืาสื่าม่ารืถก/าหนดต่"วิเล�อกที่��ถ0กเล�อกไวิ+ล�วิงหน+าได+ โดยก/าหนดแอต่ที่รื�บ�วิต่!

selected=”elected”

ตั!วเล/อกรายการแบบจ!ดีกล��ม <potgroup> ในกรืณ์�ที่��ต่"วิเล�อกม่�จ/านวินม่าก การืแบ�งกล7�ม่ให+ต่"วิเล�อกจะช่�วิยให+เรืาไม่�สื่"บสื่นในการื

เล�อกขี+อม่0ล และที่/าให+ม่�ควิาม่เป�นรืะเบ�ยบเรื�ยบรื+อยอ�กด+วิยต่"วิอย�างการืใช่+ต่"วิเล�อกแบบจ"ดกล7�ม่

ตั!วเล/อกรายการแบบหลายบรรที่!ดี จากต่"วิอย�างก�อนหน+า เรืาได+สื่รื+างต่"วิเล�อกหลายบรืรืที่"ดซึ่'�งปรืะหย"ดเน�(อที่�� แต่�ถ+าเรืา

ต่+องสื่รื+างต่"วิเล�อกรืายการืแบบหลายบรืรืที่"ด ที่��ม่�การืแสื่ดงรืายการืม่ากกวิ�า 1 รืายการืในครืาวิเด�ยวิ เรืาจะใช่+แอต่ที่รื�บ�วิต่! size

ต่"วิอย�างการืใช่+ต่"วิเล�อกแบบหลายบรืรืที่"ด

การจ!ดีแบ�งแบบฟอร�ม <fieldset>,<legend>,<label> ถ+าเวิ1บเพจขีองเรืาม่�อ7ปกรืณ์!ให+กรือกขี+อม่0ลหลายๆต่"วิ การืจ"ดแบ�งกล7�ม่ขีองอ7ปกรืณ์!จะช่�วิยให+ฟอรื!ม่ด0ด� และเขี+าใจขีอบเขีต่การืกรือกได+ม่ากย��งขี'(น การืจ"ดแบ�งกล7�ม่หรื�อการืจ"ดแบ�งฟอรื!ม่เรืาจะใช่+แที่1ก fieldset ด"งน�(

ต่"วิอย�างการืจ"ดแบ�งฟอรื!ม่