บทที่ 9

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

1.การทำงานของฟอร์ม (Form) และเครื่องมือในการสร้างฟอร์ม

         ฟอร์ม (Form) เป็นเครื่องมือที่ช่วยทำให้เกิดปฏิสัมพันธ์ระหว่างผู้ใช้งานกับเว็บไซต์โดยใช้ฟิลด์ Field ชนิดต่าง ๆ เช่น Text Field, Button, Check Box ในการรับข้อมูลจากผู้ใช้เพื่อนำไปผ่านการประมวลผลในเซิร์ฟเวอร์

          ลักษณะของฟอร์มที่ทำงานบนเว็บเพจเรียกว่า ไดนามิกเว็บเพจ (Dynamic Webpage) หมายถึง เว็บเพจที่มีการโต้ตอบกับผู้ใช้ เช่น แบบฟอร์มสมัครสมาชิก แบบฟอร์มสอบถามความคิดเห็น แบบฟอร์มค้นหาข้อมูล เป็นต้น

            หลักการทำงานของฟอร์มบนไดนามิกเว็บเพจ คือ จะต้องสร้างฟอร์มไว้บนเว็บเพจเมื่อผู้ใช้กรอกข้อมูลและส่งข้อมูลเข้ามายังเว็บเซิร์ฟเวอร์ เซิร์ฟเวอร์จะค้นหาเว็บเพจและส่งข้อมูลไปยังแอพพลิเคชัน เซิร์ฟเวอร์ เซิร์ฟเวอร์จะประมวลผลข้อมูลที่ได้รับ แล้วส่งผ่านหน้าเว็บที่ประมวลผลแล้วไปยังเว็บเซิร์ฟเวอร์  แล้วส่งผลลัพธ์ที่ได้ไปยังเบราว์เซอร์อีกครั้ง

เครื่องมือที่ใช้ในการสร้างฟอร์ม

เครื่องมือ                                                        ความหมาย
 

                                    มุมมองที่แสดงฟอร์ม(Form View)

 
                                    มุมมองการออกแบบฟอร์ม(Design View)

 
                                   ซ่อน/แสดง กล่องรายการเขตข้อมูล(FieldList Box)

 
                                   ซ่อน/แสดง  กล่องเครื่องมือ(ToolBox)

 
                                    บันทึกฟอร์ม(Save)
 

                                   พิมพ์ฟอร์มออกทางเครื่องพิมพ์(Print)
 

                                    ดูตัวอย่างก่อนพิมพ์(Print Preview)
 

                                   เรียกการจัดรูปแบบอัตโนมัติมาใช้งาน(AutoFormats)
 

                                    เข้าสู่หน้าต่างการเขียนรหัส/โค๊ด(Code)
  

                                    แสดงหน้าต่างคุณสมบัติของฟอร์ม(Properties)
  

                                    เลือกตัวสร้างนิพจน์/มาโคร/โค๊ด(Code)
  

                                    แสดงหน้าต่างฐานข้อมูล

2. การสร้างฟอร์มและฟิลด์กรอกข้อความ

1.  คลิกที่ตำแหน่งที่สร้างฟอร์ม คำสั่ง Insert > Form > Form

2.  จะปรากฏเส้นประที่ตำแหน่งของเคอร์เซอร์ ซึ่งเป็นตำแหน่งที่จะสร้างฟอร์มพิมพ์ข้อความ

3.  สร้างฟิลด์ข้อความ Text Field สำหรับอีเมล์ คำสั่ง Insert > Form > Text Field จะได้หน้าต่าง Input Tag Accessibility Attributes ตั้งชื่อ Text Field ในช่อง Label                   

    เสร็จแล้วคลิก OK จะได้ Text Field ชื่ออีเมล์ บนพื้นที่สร้างฟอร์ม

    4.สร้าง Text Field “รหัสผ่าน” พิมพ์รหัสผ่านอีกครั้ง   “ชื่อ” “นามสกุล”

3.การสร้างรายการตัวเลือก (List/Menu)

การสร้างรายการให้เลือกแบบ List/Menu เป็นรายการที่มีข้อมูลที่แน่นอนเพื่อให้ผู้สมัครเลือกรายการใดรายการหนึ่ง เช่น วันที่ เดือน เป็นต้น มีวิธีสร้างดังนี้

        1.  ตำแหน่งที่จะสร้างรายการ แล้วเลือกคำสั่ง Insert > Form>Select (List/Menu) ตั้งชื่อ Label เป็นวันเกิด

        2.  เสร็จแล้วคลิกเลือกรายการที่สร้างไว้ ดูที่ Properties เลือก Type เป็นเมนูแล้วกำหนดรายละเอียดของ List ที่ปุ่ม จะได้หน้าต่าง List Values  

                                              

        3.  คลิกและพิมพ์ตัวเลขที่ต้องการให้แสดงในรายการที่ Item Label และ Value ซึ่งค่าที่ต้องนำไปใช้ในโปรแกรมสคริปต์ คลิกที่ปุ่ม   เพื่อเพิ่มรายการ ละปุ่ม เพื่อลบรายการออก 

เสร็จแล้วคลิก OK

4. การสร้างพื้นที่รับข้อความ 

  ในกรณีที่ต้องการพิมพ์ข้อความยาว ๆ เช่น ที่อยู่ผู้สมัคร ไม่สามารถพิมพ์ด้วย Text Field ปกติจะต้องสร้างพื้นที่รับข้อความขึ้นมาดังนี้

        1.  คลิกที่ตำแหน่งที่จะสร้าง Text area แล้วคลิกคำสั่ง Insert > Form> Text area ตั้งชื่อ Label เป็นที่อยู่ แล้วคลิก OK    

        2.  กำหนดรายละเอียดของพื้นที่ Properties เช่นความยาวตัวอักษร

5. การสร้าง Radio Button

  Radio Button เป็นปุ่มสำหรับข้อมูลที่ให้ผู้สมัครเลือกข้อมูลได้เพียงตัวเลือกเดียว โดยจะเป็นข้อมูลที่กำหนดไว้แน่นอน เช่น อายุ เพศ เป็นต้น

        1. เลือกบริเวณที่จะ สร้างปุ่ม

        2. เลือกคำสั่ง Insert > Form> Radio Button ตั้งชื่อ Label

        3. กำหนดค่าต่างๆที่ Properties

        4.  ที่ตัวเลือก Checked value เป็นค่าที่จะนำไปกำหนดในสคลิปต์ ดังนั้น ถ้า Radio Button มีจำนวนหลายปุ่ม ให้ตั้งชื่อแตกต่างกันออกไป โดยให้สื่อถึงความหมายของปุ่มนั้น

6. การสร้าง Checkbox

  Check box จัดเป็นกล่องรับข้อความชนิดหนึ่งซึ่งเหมาะกับข้อมูลประเภทมีตัวเลือกหลายคำตอบ เช่น สินค้าที่ชอบ เป็นต้น มีขั้นตอนการสร้างดังนี้

        1.  เลือกบริเวณที่จะสร้าง Checkbox

        2.  เลือกคำสั่ง Insert > Form> Checkbox

        3.  ตั้งชื่อที่ Label

          4.  คลิกเลือก Check box   และกำหนดค่าต่าง ๆ ที่ Properties

7. การสร้าง File Field

File Field เป็นกรอบสำหรับเปิดโอกาสให้ผู้นำไฟล์งาน เช่น ภาพ ข้อความ ตาราง อัพโหลดขึ้นมาใส่ในเว็บเพจ เช่น ภาพสมาชิก เป็นต้น มีขั้นตอนดังนี้

        1.  สร้างขอบเขตของฟอร์มที่จะใส่ File Field คลิกเลือกคำสั่ง Insert > Form> File Field

        2.  ตั้งชื่อ Label

        3.  คลิกที่ File Field เพื่อกำหนดรายละเอียดที่ Properties….

        4.  การตั้งชื่อ File Field Name เป็นชื่อที่นำไปใช้เป็นตัวแปรในการเขียนโปรแกรมสคริปต์ได้

8.การสร้างปุ่มมาตรฐาน

ปุ่มมาตรฐาน Button เป็นปุ่มที่สร้างไว้สำหรับประมวลค่าทั้งหมด เช่น ปุ่มตกลง ปุ่มยกเลิกและปุ่มคืนค่า เป็นต้น การสร้างปุ่มมาตรฐานมีขั้นตอนดังนี้

        1.  สร้างขอบเขตของฟอร์มเพื่อสร้างปุ่มมาตรฐาน                                                                                                                                                                                               

        2.  คลิกเลือกเครื่องมือ Button ตั้งชื่อ Label แล้วคลิก OK                                                                                                                                                                                                                
        3.  คลิกที่ปุ่ม เพื่อกำหนดค่าที่ช่อง Properties

การสร้างภาพในฟอร์ม

1. คลิกเลือกขอบเขตของฟอร์มที่จะใส่ภาพ

2. คลิกที่เครื่องมือ Image Field จะได้หน้าต่าง Select Image Source ดังนี้

3. เลือกภาพที่ต้องการ แล้วคลิก OK

4. จัดรูปแบบรูปภาพด้วยปุ่ม Edit Image ที่ Properties

การจัดกลุ่มฟอร์ม

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

9. การสร้าง Jump menu

Jump menu เป็นการออกแบบฟอร์มให้ลิงค์ไปยังเว็บไซต์ หรือ URL ที่ต้องการ

1. ให้เราไปที่ Insert Bar จากนั้นทำการเลือกไปที่ TAB ที่ชื่อว่า Forms แล้วเลือกไปที่ Icon ที่ชื่อว่า Jump Menu ดังรูป (Insert -> Forms -> Jump Menu)

2. เมื่อเราทำการ Click เลือกไปที่ Icon ดังกล่าวแล้ว โปรแกรมจะทำการเปิดหน้าต่างขึ้นมาใหม่เพื่อให้เรากำหนดค่าต่าง ๆ ดังรูป

ที่หน้าต่าง Jump Menu นี้ ให้เราทำการกำหนดค่า ดังนี้
Menu Item : สำหรับการแสดงและการจัดการเมนูใน Select Box 
Text : สำหรับการพิมพ์ข้อความที่จะแสดงใน Select Box 
When Select, Go To URL : สำหรับการกรอก URL หรือทำการ Brows... ไปยังไฟล์ที่ต้องการจะเชื่อมโยงไป เมื่อผู้ใช้งานเลือกที่เมนูนั้น ๆ 
Open URLs In : ใช้เมื่อเว็บเพจนั้น ๆ มีการใช้งานในแบบเฟรม (Frames)

3. เมื่อเราได้ทำการกำหนดค่าต่าง ๆ เสร็จสิ้นแล้ว ให้เราทำการ OK ได้ทันที เราก็จะได้ Select ที่เป็น Jump Menu ในเว็บเพจของเราแล้ว ให้เราทำการ Preview และลองใช้งานดูผลกับ Web Browser ต่อไป

10. การตรวจสอบการป้อนข้อมูลของฟอร์ม

 เป็นการตรวจสอบว่าข้อมูลที่กรอกเข้าไปนั้นถูกต้องหรือไม่ เช่น หมายเลขโทรศัพท์ รหัสประจำตัว มีขั้นตอนดังนี้          

                                                                                                                                                  1.  คลิกเลือก Text Field จะทำการตรวจสอบ                                                                                                                                                                                                            

2.  ไปที่พาเนล Tag > Form > ที่ตัวเลือก Behaviors คลิกเครื่องหมาย + แล้วเลือก

3.  จะได้หน้าต่าง Validate Form เลือก Text ที่ต้องการในช่อง Named Fields

4.  เลือก Accept เป็น Number คลิก OK จะได้ Event เป็น on Blur หมายถึง เมื่อคลิกที่ฟอร์มโดยไม่ใส่ค่าใด ๆ ลงไป โปรแกรมจะเตือนให้ใส่ค่าลงไปให้ถูก                                                                                                                                                                                                                       ต้อง4.เลือก Accept เป็น Number         คลิก OK จะได้ Event เป็น on Blur หมายถึง เมื่อคลิกที่ฟอร์มโดยไม่ใส่ค่าใด ๆ ลงไป โปรแกรมจะเตือนให้ใส่ค่าลงไปให้ถูกต้อง