ใบเนื้อหา 9

วชิ า การสรา้ งเว็บไซต์ รหัสวชิ า 2204-2009 หน่วยท่ี 9 การสร้างฟอร์ม ครูผู้สอน ศริ ินภา บตุ ะเขียว แผนกวชิ าคอมพวิ เตอร์ธุรกจิวทิ ยาลัยเทคนคิ กาญจนาภิเษก สมทุ รปราการ

ใบเนอ้ื หา หนว่ ยท่ี 9 การสร้างฟอร์มเน้อื หาสาระการสอน/การเรยี นรู้• ดา้ นความรู้(ทฤษฎี) 1. การทางานของฟอร์ม (Form) และเครอ่ื งมอื ในการสร้างฟอร์มฟอรม์ (Form) ฟอร์ม (Form) เป็นเครื่องมือทช่ี ่วยทาใหเ้ กดิ ปฏสิ มั พนั ธร์ ะหวา่ งผใู ช้งานกับเวบ็ ไซตโ์ ดยใชฟ้ ลิ ด์ Fieldชนดิ ตา่ ง ๆ เช่น Text Field, Button, Check Box ในการรับข้อมลู จากผใู ช้เพ่ือนาไปผ่านการประมวลผลในเซริ ์ฟเวอร์ ลักษณะของฟอร์มท่ที างานบนเว็บเพจเรียกว่า ไดนามกิ เว็บเพจ (Dynamic Webpage) หมายถึงเวบ็ เพจท่มี ีการโต้ตอบกบั ผูใช้ เช่น แบบฟอร์มสมัครสมาชิก แบบฟอร์มสอบถามความคดิ เห็น แบบฟอร์มค้นหาขอ้ มลู เปน็ ต้น หลกั การทางานของฟอร์มบนไดนามิกเว็บเพจ คือ จะตอ้ งสร้างฟอร์มไว้บนเว็บเพจเมื่อผู้ใชก้ รอกข้อมลู และส่งข้อมูลเข้ามายังเว็บเซิร์ฟเวอร์ เซริ ฟ์ เวอร์จะค้นหาเว็บเพจและส่งข้อมูลไปยังแอพพลเิ คชันเซิรฟ์ เวอร์ เซริ ์ฟเวอรจ์ ะประมวลผลขอ้ มูลท่ีได้รบั แล้วส่งผ่านหน้าเวบ็ ทปี่ ระมวลผลแล้วไปยังเว็บเซริ ์ฟเวอร์แลว้ ส่งผลลัพธท์ ่ไี ด้ไปยงั เบราว์เซอร์อีกคร้งั เคร่อื งมอื ทใี่ ช้ในการสรา้ งฟอรม์

1. ฟอร์ม (Form) ใช้สรา้ งฟอร์มทีม่ ขี อบเขตครอบคลมุ ฟิลด์ท่ีอยูใ่ นฟอร์มทง้ั หมด 2. Text Field เปน็ ฟิลดส์ าหรบั ขอ้ มูลที่มีลกั ษณะเปน็ ข้อความส้ัน ๆ ไมเ่ กนิ 1 บรรทัด เชน่ ชอื่ ,อีเมล เป็นต้น 3. Hidden Field เป็นฟลิ ดท์ ่ีถกู ซ่อนไมใ่ หป้ รากฏขึ้นบนฟอร์ม ทาหนา้ ทส่ี ง่ ข้อมูลท่เี รากาหนดไว้ลว่ งหน้าแลว้ ไปยังเว็บเซริ ฟ์ เวอร์พร้อมกับข้อมลู อืน่ ทก่ี รอก 4. Text Area เปน็ ฟิลด์สาหรับข้อมูลทม่ี ลี ักษณะเปน็ ขอ้ ความ หรือตัวอักษรมคี วามยาวมากกวา่ 1บรรทัด เช่น ขอ้ ความในการส่งอีเมล 5. Check Box เป็นฟิลด์สาหรับขอ้ มูลที่มลี กั ษณะให้เลอื กเช็กก่ขี อ้ กไ็ ด้จากตวั เลือกทั้งหมด 6. Radio Button เปน็ ฟิลด์สาหรบั ใหเ้ ลอื กเช็กเพยี งข้อใดข้อหนึง่ 7. Radio Group เป็นฟลิ ด์ที่แสดงรายการใหเ้ ลือกจากรายการท่ีมีตวั เลือกค่อนขา้ งมาก 8. List / Menu เป็นฟิลด์ทีแ่ สดงรายการใหเ้ ลอื กจากข้อมลู ท่ีกาหนดไว้ 9. Jumb Menu เปน็ การออกแบบฟอร์มให้ลิงก์ไปยังเวบ็ ไซต์ หรือ URL ท่ตี อ้ งการ 10. Image Field เป็นฟลิ ด์สาหรับนาภาพกราฟิกมาใชแ้ ทนปุ่ม Submit ของฟอร์ม 11. File Field เปน็ ฟิลดส์ าหรบั เลอื กไฟล์ในเครื่องของตน เพ่ืออพั โหลดขึ้นบนเซริ ์ฟเวอร์ 12. Button เปน็ ป่มุ สาหรับยนื ยนั ขอ้ มูลภายในฟอร์ม 13. Label เป็นฟิลดส์ าหรับใสข่ ้อความอธิบายกากับฟลิ ด์ 14. Field Set เปน็ ฟิลดท์ ี่ใช้เพื่อจัดกลุ่มฟลิ ดต์ ่าง ๆ รวมเขา้ ไวด้ ้วยกัน โดยมขี ้อความกากับกลุ่มของฟลิ ด์นั้นอยู่ 2. การสร้างฟอรม์ และฟลิ ด์กรอกข้อความ การสรา้ งฟอรม์ มีวธิ กี าร ดงั น้ี 1. คลิกทต่ี าแหน่งที่จะสรา้ งฟอร์ม คาสงั่ Insert >> Form >> Form

2. จะปรากฏเสน้ ประอยทู่ ่ตี าแหน่งของเคอรเ์ ซอร์ ซ่ึงเป็นตาแหนง่ ท่ีจะสร้างฟอร์มพิมพ์ข้อความ“แบบฟอร์มสมัครสมาชิก” 3. สรา้ งฟิลด์ข้อความ (Text Field) สาหรบั E-mail คาสัง่ Insert >> Form >>Text Field จะได้หนา้ ตา่ ง Input Tag Accessibility Attributes ตัง้ ชอ่ื Text Field ในชอ่ ง Label เสร็จแล้วคลกิ OK จะได้Text Field ช่อื E-mail บนพื้นท่สี ร้างฟอรม์ 4. สรา้ ง Text Field “รหสั ผ่าน” พมิ พ์รหัสผา่ นอกี ครงั้ “ชอื่ ” “นามสกุล”

3. การสรา้ งรายการตัวเลือก (List/Menu) การสรา้ งรายการใหเ้ ลอื กแบบ List / Menu เป็นรายการท่ีมีขอ้ มลู ท่ีแนน่ อนเพ่ือให้ผู้สมัครเลือกรายการใดรายการหนง่ึ เช่น วันที่ เดอื น เป็นต้น มวี ิธีการสร้าง ดงั น้ี 1. คลิกตาแหน่งทจี่ ะสร้างรายการ แล้วเลอื กคาส่ัง Insert >> Form >> Select(List / Menu) ตง้ัชอ่ื Label เปน็ วนั เกดิ 2. เสรจ็ แลว้ คลิกเลือกรายการที่สรา้ งไว้ ดทู ่ี Properties เลอื ก Type เป็น Menu แลว้ กาหนดรายละเอียดของ List ท่ปี ุ่ม จะได้หนา้ ต่าง List Values3. คลิกและพิมพต์ ัวเลขทต่ี ้องการให้แสดงในรายการที่ Item Label และ Value ซงึ่ เป็นค่าท่จี ะต้องนาไปใช้ในโปรแกรมสคริปต์ คลกิ ที่ปุ่ม เพ่ือเพิ่มรายการ และปุม่ เพอ่ื ลบรายการออก เสรจ็แลว้ คลิก OK

4. สรา้ ง List / Menu ให้กับ “ เดือน ” 5. สรา้ ง Text Field ให้กบั “พ.ศ.” โดยกาหนดตวั เลข พ.ศ. ให้ผูส้ มัครเดมิ ข้นึ ตน้ ดว้ ย 25… 6. ให้คลกิ ที่ตวั เลือก Init Val แลว้ เตมิ เลข 25 ลงไป จะได้ตวั อยา่ งแบบฟอรม์ ดงั รูป 4. การสร้างพน้ื ทรี่ บั ข้อความ ในกรณีท่ีต้องพิมพข์ ้อความยาว ๆ เชน่ ที่อยูผ่ ู้สมคั ร ไม่สามารถพมิ พ์ด้วย Text Field ปกติจะตอ้ งสร้างพนื้ ที่รบั ข้อความ หรอื Text area ขึ้นมา ดังนี้ 1. คลกิ ทีต่ าแหน่งทจ่ี ะสร้าง Text area แล้วคลกิ คาสัง่ Insert >> Form >> Text area ต้งั ช่ือLabel เปน็ “ทอี่ ยู่” แล้วคลกิ OK 2. กาหนดรายละเอยี ดของพื้นท่ี Properties เช่น ความยาวตวั อักษร 30 ตวั ต่อบรรทดั จานวน 5บรรทัด เปน็ ต้น 3. สร้าง Text Field “เลือกจังหวดั ” และ “รหัสไปรษณยี ์” โดยกาหนดใหร้ หสั ไปรษณีย์ เป็นตวั เลข 6 หลกั

5. การสร้าง Ratio Button Radio Button เป็นปมุ่ สาหรับขอ้ มูลท่ีใหผ้ ูส้ มคั รเลือกข้อมูลไดเ้ พยี งตวั เลือกเดยี ว โดยจะเป็นข้อมูลท่ีกาหนดไวแ้ น่นอน เช่น อายุ เพศ สถานภาพสมรส ฯลฯ มวี ธิ ีการสรา้ ง ดงั น้ี 1. เลือกบริเวณทจี่ ะสรา้ ง Radio Button 2. เลอื กคาสง่ั Insert >> Form >> Radio Button ตงั้ ชื่อ Label 3. กาหนดคา่ ต่าง ๆ ท่ี Properties 4. ทตี่ วั เลอื ก Checked value เป็นคา่ ท่จี ะนาไปกาหนดในสครปิ ต์ ดังน้นั ถา้ Radio Button มีจานวนหลายปมุ่ ให้ต้งั ชื่อแตกตา่ งกนั ออกไป โดยให้ส่อื ถึงความหมายของปุ่มนั้น ๆ 6. การสรา้ ง checkbox Checkbox จัดเป็นกลอ่ งรบั ข้อความชนดิ หน่ึงซึ่งเหมาะกับขอ้ มลู ประเภทมีตัวเลอื กหลายคาตอบ เชน่สินค้าท่ีชอบ รายการโทรทศั น์ทช่ี อบ เปน็ ตน้ การสร้าง Check Box มีวิธกี ารทา ดังนี้ 1. คลิกบรเิ วณท่จี ะสรา้ ง Check Box 2. คลิกคาส่ัง Insert >> Form >> Check Box 3. ตัง้ ช่อื ที่ Label

4. คลิกเลอื ก Check Box และกาหนดค่าตา่ ง ๆ ที่ Properties 7. การสร้าง File Field File Field เป็นกรอบสาหรบั เปดิ โอกาสให้ผนู้ าไฟล์งาน เชน่ ภาพ ข้อความ ตาราง อพั โหลดข้นึ มาใส่ในเวบ็ เพจ เช่น ภาพสมาชิก เปน็ ตน้ การสร้าง File Field มวี ิธีทาดงั นี้ 1. สรา้ งขอบเขตของฟอร์มทจ่ี ะใส่ File Field คลกิ คาสั่ง Insert >> Form >> File Field 2. ต้ังชือ่ File Field ในชอ่ ง Label เชน่ ภาพสมาชิก 3. คลิกท่ี File Field แลว้ เลือกกาหนดรายละเอยี ดท่ี Properties 4. การตง้ั ช่ือ File Field Name เปน็ ชอ่ื ที่จะนาไปใชเ้ ปน็ ตัวแปรในการเขียนโปรแกรมสครปิ ต์ได้ 8. การสรา้ งป่มุ มาตรฐาน

ปมุ่ มาตรฐาน (Button) เปน็ ปุ่มทสี่ รา้ งไว้สาหรับประมวลผลค่าท้ังหมด ยกเลกิ หรือคนื ค่า เช่น เม่อืกรอกข้อมลู เสร็จแล้ว คลกิ ปุ่มตกลง ปุ่มยกเลิก เป็นต้น โดยปกติจะประกอบด้วยปมุ่ การสรา้ งปุม่ มาตรฐานมขี ้ันตอน ดงั นี้ 1. สรา้ งขอบเขตของฟอร์มเพ่ือสร้างปมุ่ มาตรฐาน 2. คลิกทีเ่ ครื่องมือ Button และต้ังชื่อท่ีชอ่ ง Label แลว้ คลิก OK (ถา้ ไมต่ ้ังช่อื ป่มุ ใหค้ ลกิ OK ได้ เลย) 3. จะได้ปุ่มมาตรฐานช่อื Submit คลกิ ท่ปี ุ่มมาตรฐาน แลว้ เลือกตัวเลอื กที่ Properties 4. ตวั เลอื ก Botton name กาหนดได้ 3 ตวั เลอื กอตั โนมตั ิ คือ คลกิ ท่ี Submit, Reset, Cancelในชอ่ ง Value แล้วเปลย่ี นชอ่ื ปมุ่ เชน่ ตกลง เปน็ ตน้ การสรา้ งภาพในฟอร์ม 1. คลกิ เลอื กขอบเขตของฟอร์มทจ่ี ะใส่ภาพ 2. คลกิ ทีเ่ คร่ืองมอื Image Field จะได้หน้าตา่ ง Select Image Source ดงั น้ี

3. เลอื กภาพทต่ี อ้ งการ แล้วคลกิ OK 4. จัดรูปแบบรปู ภาพดว้ ยปุม่ Edit Image ที่ Properties การจดั กลมุ่ ฟอรม์ เปน็ การรวมกลุม่ ของฟอรม์ ที่มเี นื้อหาใกลเ้ คยี งกัน หรอื เป็นหมวดหมเู่ ดียวกัน 1. คลิกเลือกเส้นประของฟอร์มที่จะจัดกลุ่ม (กดแปน้ < Shift > พรอ้ มเลือกฟอร์มท่เี หลือ) 2. คลิกคาส่งั Insert >> Form >> Fieldset จะไดห้ น้าตา่ ง Fieldset 3. ตัง้ ชือ่ Fieldset เชน่ ข้อมูลส่วนตวั 4. ดา้ นบนสดุ ของกลมุ่ ฟอร์มจะมีชอ่ื ทตี่ ัง้ ไว้ และมีข้อความ < /fieldset> อยูท่ า้ ยข้อความที่เลือก9. การสร้าง Jump menu Jump Menu เป็นการออกแบบฟอร์มใหล้ งิ ค์ไปยงั เวบ็ ไซต์ หรอื URL ท่ีต้องการ 1. คลิกทต่ี าแหน่งทีต่ ้องการจะสร้าง Jump Menu 2. เลอื กคาสงั่ Insert >> Form >> Jump Menu จะไดห้ น้าตา่ ง Jump Menu

3. เลอื กการตัง้ คา่ ใน Menu Items และเลือก URL ทป่ี ุ่ม Browse 4. กาหนดลกั ษณะการเปดิ ไฟล์ เช่น Main Window 5. กาหนดรูปแบบการทางานของ Jump Menu ที่ Properties 10. การตรวจสอบการป้อนข้อมูลของฟอร์ม เป็นการตรวจสอบว่าข้อมลู ที่กรอกเขา้ มาน้นั ถูกตอ้ งหรือตรงตามข้อกาหนดท่ีตั้งไวห้ รือไม่ เชน่หมายเลขโทรศัพท์ รหสั ไปรษณยี ์ มีขนั้ ตอนดังนี้ 1. คลกิ เลอื ก Text Field ที่จะทาการตรวจสอบ 2. ไปที่พาเนล Tag < Form > ท่ตี ัวเลือก Behaviors คลิกเครอื่ งหมาย + แลว้ เลือก Validate Form

3. จะได้หน้าต่าง Validate Form เลือก Text ท่ีต้องการในช่อง Named Fields4. เลอื ก Accept เปน็ Number คลิก OK

5. จะได้ event เปน็ onBlur หมายถงึ เม่ือคลิกที่ฟอรม์ โดยไมใ่ ส่ค่าใด ๆ ลงไปโปรแกรมจะเตอื นให้ใสค่ ่าลงไปให้ถกู ต้อง