Page 1

หนวยที่ 10 งานการสรางฟอรม


เขาใจรูปแบบการทํางานของฟอรมและ CGI • CGI หรือ Common Gateway Interface ไมใชภาษาโปรแกรมมิง่ แตเปน วิธีมาตรฐานในการติดตอสื่อสารระหวางฟอรม HTML กับโปรแกรมที่เรา เขียนขึ้นมาเพื่อใชจัดการขอมูลที่สงมาจากฟอรม ซึ่งโปรแกรมที่เราเขียน ขึ้นมานั้นสามารถเขียนขึ้นมาไดหลายๆ ภาษา เชน C, PHP, Java และ Visual Basic


หนาที่ (CGI Program หรือ CGI Script) • หนาที่ของโปรแกรมที่เราเขียนขึ้นมา (CGI Program หรือ CGI Script) จะทําหนาที่ในการรับขอมูลมาจากฟอรม HTML และจัดการกับ ขอมูลนั้น เชน นําขอมูลจัดเก็บลงตารางฐานขอมูล จากนั้นจึงสงผลลัพธ การทํางานในรูปแบบภาษา HTML กลับไปที่บราวเซอร


การสรางแบบฟอรม <form> เราตองใชแท็ก form เพื่อสรางแบบฟอรมในเว็บเพจ ซึ่งมีรูปแบบดังนี้ ชื่อแท็ก form ตําแหนงของแท็ก อยูภายในแท็ก <body> …</body> รูปแบบ <form method= “วิธีการสงขอมูล” คาที่กําหนดใหใช method คือ วิธีการสงขอมูลของ CGI มี 2 แบบ Post คือการสงขอมูลภายในฟอรมทีละบรรทัด Get คือ การสงขอมูลภายในฟอรมตอกันเปนประโยคเดียว Action คือ ตําแหนงของโปรแกรมที่ CGI เรียกขึ้นมาทํางาน


การสรางชองรับขอมล <input> ชื่อแท็ก ตําแหนงของแท็ก รูปแบบ

input อยูภายในแท็ก <form>….</form> <input type = “ชนิดของชองรับขอมูล” name= “ชื่อชองรับขอมูล”> คาที่กําหนดใหใช ชนิดของชองรับขอมูล เชน button, checkbox, file, hidden, image, password, radio, reset, submit, text ชื่ออุปกรณคือ ชื่อที่เรียกชองรับขอมูลนั้น


ปรับขนาดชองรับขอความแถวเดียว ขอมูลที่เราใชกรอกลงไปนั้นอาจมีความยาวไมเทากัน เราสามารถปรับ ขนาดของชองใหเหมาะสมกับเนื้อหาที่เราแสดงไดดงั นี้ ชื่อแอททริบิวท size ตําแหนง อยูภายในแท็กเปด <input> รูปแบบ <input type = “text” size= “20”> คาที่กําหนด ขนาดจํานวน เชน 20 คือ 20 ตัวอักษร


กําหนดจํานวนตัวอักษรที่ใหพมิ พลงไปได เราสามารถกําหนดตัวอักษรที่พิมพเขามา เชน กําหนดใหพิมพเพียง 5 ตัวอักษรเทานั้น หากเกินจะไมรับตัวอักษร ชื่อแอททริบิวท maxlength ตําแหนง อยูภายในแท็กเปด <input..> รูปแบบ <input type= “text” maxlength= “5”> คาที่กําหนดใหใช จํานวนตัวอักษร คือใสได 5 ตัวอักษรเทานั้น


ชองรับขอความแถวเดียวแบบรหัสผาน (password) ทําหนาที่เชนเดียวกับชองรับขอความธรรมดา แตตัวอักษรที่พิมพลงไปจะ แสดงดวยเครื่องหมาย * หรือ  แทน <body> <form> <input type= “password” size = “20” maxlength= “10”> </form> </body>


การสรางปุม (submit, reset, button) การสรางปุม (submit, reset, button) ในฟอรมปกติจะตองมีปุมใหกด ซึ่งปุมในฟอรม HTML จะมี 3 ลักษณะ คือ -ปุม submit เมื่อกดปุมนี้ ขอมูลในฟอรมทั้งหมดจะถูกสงไปให CGI Scritpts ที่เรากําหนดไวในแอททริบิวท action ของแท็ก form -ปุม reset เมื่อกดปุมนี้อุปกรณในฟอรมทั้งหมดจะกลับสูคา เริ่มตน กอนที่เรา จะพิมพขอมูลใดๆ ลงฟอรม -ปุม button เปนปุมที่สรางขึน้ มาเพื่อทํางานใดๆ โดยจะเรียก javascript หรือ vbscript ขึ้นมาทํางาน เชน ปุมแสดงปฏิทิน


ชองรับขอมูลประเภทไฟล (file) ชองรับขอมูลประเภทไฟล (file) ถาเราเคยใชอีเมลฟรี และเคยสงไฟลแนบไปกับอีเมล ตองรูจ ักกับชอง ขอความที่ขางๆ เปนปุม Browser ใชเพื่อเลือกไฟลที่ตองการสงไปกับฟอรม นั้น เมื่อเรากดปุม submit ไฟลนั้นก็จะสงไปพรอมกับขอมูลในอุปกรณตวั อื่นๆ ที่อยูในฟอรม


ตัวเลือกแบบใหเลือกหลายขอ (checkbox) ตัวเลือกแบบใหเลือกหลายขอ (checkbox) หากเราเคยทําแบบสอบถามทางอินเทอรเน็ต ที่คําถามบอกวาเรา สามารถเลือกคําตอบไดมากกวา 1 ขอ คําถามนี้จะใชเช็คบอกซ ซึ่งมี 2 สถานะ คือ ใชหรือไม เลือกไมเลือก เราสามารถใชงานเช็คบอกซในกรณี ตองการใหผูกรอกแบบฟอรมเลือกไดหลายๆ ตัวเลือกพรอมกัน เชน ประเภท กิจกรรมที่ชอบทํา ชื่อดาราคนโปรด


ตัวเลือกแบบใหเลือกขอเดียว (radio button) ตัวเลือกแบบใหเลือกขอเดียว (radio button) จะตรงขามกับเช็คบอกซ เพราะเรดิโอบัตทอน จะใหผูใชเลือกเพียงขอ เดียว จากตัวเลือกทั้งหมด ตัวเลือกประเภทนี้ เรามักจะเห็นในการใชทํา แบบทดสอบ หรือแบบประเมินผลสิ่งใดสิ่งหนึ่ง


ชองรับขอความหลายบรรทัด <textarea> ชองรับขอความหลายบรรทัด <textarea> textarea> ในกรณีที่มีขอมูลที่ตองปอนในฟอรมมากกวา 1 บรรทัด เราสามารถใช Text Area ไดมีแท็กที่ใชมีรูปแบบ ดังนี้ ชื่อแท็ก textarea (text area) ชื่อแอททริบิวท cols, rows ตําแหนง อยูภายในแท็ก <form > …</form> รูปแบบ <textarea cols= “จํานวนตัวอักษรใน 1 แถว” rows= “จํานวนแถว”> </textarea> คาที่กําหนดใหใช ตัวเลขจํานวนเต็มบวก


กําหนดการตัดคํา ปกติถาเราพิมพประโยคยาวๆ Text Area จะตัดคําขึ้นบรรทัดใหมใหเราเอง แตถา เราไมตองการใหมีการตัดคํา หรือตองการตัดคําเองตามตําแหนงที่ตองการ เราสามารถ ทําไดโดยใชแอททริบิวท wrap ชื่อแอททริบิวท wrap ตําแหนง อยูภายในแท็กเปด <textarea> รูปแบบ wrap= “off | physical | virtual” คาที่กําหนดใหใช off หมายความวา จะไมมีการตัดคํา ประโยคจะ ยาวติดกันไปเรื่อยๆ Physical หมายความวา เมื่อกดปุม submit ให สงอักขระขึ้นบรรทัดใหมที่แทรกในขอความที่เราพิมพไปที่เซิรฟเวอรดวย Virtual หมายความวา เมื่อกดปุม submit จะตัด ตัวอักขระขึ้นบรรทัดใหมที่แท็กในขอความที่เราพิมพออกกอนที่จะสงไปเซิรฟเวอร


การสรางตัวเลือกรายการ <select>,<option> ตัวเลือกรายการ หรือการใช selection เปนอุปกรณที่ใชแสดงขอมูลใหผูใชเลือกเพียง 1 ขอมูลจากขอมูลทั้งหมด คลาย radio button แตจะประหยัดพื้นที่ในการแสดงผล มากกวา ชื่อแท็ก select ,option ตําแหนง อยูภายในแท็ก <form>..</form> รูปแบบ <select name= “ชื่ออุปกรณ”> <option value= “คาตัวเลือก 1”>ชื่อตัวเลือก 1 </option> <option value= “คาตัวเลือก 2”> ชื่อตัวเลือก 2 </option> </select>


การสรางตัวเลือกรายการ <select>,<option> คาที่กําหนดใหใช คาตัวเลือก คือ คาที่จะถูกสงไปให เซิรฟเวอร เมื่อคลิกปุม submit ชื่อตัวเลือก คือ ชื่อที่จะแสดงผลเปนตัวเลือกในฟอรม HTML


การสรางรายการแบบจัดกลุม <optgroup> optgroup> ในกรณีที่ตัวเลือกของเรามีจํานวนมาก การแบงกลุมตัวเลือกจะชวยใหเราไม สับสนในการเลือกขอมูล และทําใหมึความเปนระเบียบเรียบรอยอีกดวย

ชือ่ แท็ก ชื่อแอททริบิวท ตําแหนง

optgroup (Option Grouping) label อยูภายในแท็ก <select>…</select>


การสรางรายการแบบจัดกลุม <optgroup> optgroup> รูปแบบ <select name= “ชื่ออุปกรณ”>

<optgroup label = “ชื่อกลุม1”><option>…</optgroup> <optgroup label = “ชื่อกลุม1”><option>…</optgroup> ……… </select> คาที่กําหนดใหใช ชื่อกลุม คือ ชื่อที่จะเปนชื่อกลุมของรายการ


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

ชื่อแท็ก

ตําแหนง

<fieldset> (form field grouping) <legend> (field legend) <label> (form control label) อยูภายในแท็ก <form>…</form>


การจัดแบงแบบฟอรม <fiedset>, fiedset>, <legend>, <label> รูปแบบ <fieldset> <legend> ชื่อแสดงที่กรอบ fieldset </legend> <label> ชื่ออุปกรณ 1 </label> < label > ชื่ออุปกรณ1</label> </fieldset>


การสร้างฟอร์ม  

อธิบายเกี่ยวกับการสร้างฟอร์ม

Read more
Read more
Similar to
Popular now
Just for you