บทที่ 9

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

 

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

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

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

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

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

 1.  Form ใช้สร้างฟอร์มที่มีขอบเขตครอบคลุมฟิลด์ที่อยู่ในฟอร์มทั้งหมด

 2.  Text Field เป็นฟิลด์สำหรับข้อมูลที่มีลักษณะเป็นข้อความสั้นๆ ไม่เกิน บรรทัด

3.   Hidden Field เป็นฟิลด์ที่ถูกซ่อนไม้ให้ปรากฏขึ้นบนฟอร์ม ทำหน้าที่ส่งข้อมูลที่เรากำหนดไว้ล่วงหน้าแล้วไปยังเว็บเซิร์ฟเวอร์พร้อมกับข้อมูลอื่นที่กรอก

4.  Text Area เป็นฟิลด์สำหรับข้อมูลที่มีลักษณะเป็นข้อความหรือตัวอักษรมีความยาวมากกว่า บรรทัด

5.  Check Box เป็นฟิลด์สำหรับข้อมูลที่มีลักษณะเลือกเช็คกี่ข้อก็ได้จากตัวเลือกทั้งหมด

6.  Radio Button เป็นฟิลด์สำหรับให้เลือกเช็คเพียงข้อในข้อหนึ่ง

7.  Radio Group เป็นฟิลด์ที่แสดงรายการให้เลือกจากรายการที่มีตัวเลือกค่อนข้างมาก

8.  List/Menu เป็นฟิลด์ที่แสดงรายการให้เลือกจากข้อมูลที่กำหนดไว้

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

10.  Image เป็นฟิลด์สำหรับนำภาพกราฟิกมาใช้แทนปุ่ม Submit ของฟอร์ม

11.  File เป็นฟิลด์สำหรับเลือกไฟล์ในเครื่อง เพื่ออัพโหลดขึ้นเซิร์ฟเวอร์

12.  Button เป็นปุ่มสำหรับยืนยันข้อมูลภายในฟอร์ม

13.  Label เป็นฟิลด์สำหรับใส่ข้อความอธิบายกำกับฟิลด์

14.  Field Set
 เป็นฟิลด์ที่ใช้เพื่อจัดกลุ่มฟิลด์ต่าง ๆ รวมไว้ด้วยกัน โดยมีข้อความกำกับกลุ่มของฟิลด์นั้นอยู่

 

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.การสร้าง Check box

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

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

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

 

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

 

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

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

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

2.  เลือกคำสั่ง Insert > Form> Jump menu จะได้หน้าต่าง Jump menu

3.  เลือกการตั้งค่าใน Menu Items และเลือก URL ที่ปุ่ม Brows

4.  กำหนดลักษณะการเปิดไฟล์ เช่น Main Window

5. กำหนดรูปแบบการทำงานของ ทำงานของ Jump menu ที่ Properties…

 

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 หมายถึง เมื่อคลิกที่ฟอร์มโดยไม่ใส่ค่าใด ๆ ลงไป โปรแกรมจะเตือนให้ใส่ค่าลงไปให้ถูกต้อง

 

Free Web Hosting