ใบความรู้ที่7

บทที่ 7

ใบความรู้ที่ 7

เรื่อง : การสร้างแบบฟอร์มเพื่อกรอกข้อมูล

--------------------------------------------------------------------------------------------------------------------------

การสร้างฟอร์ม (Form)

เว็บไซต์หลายเว็บมักจะมีส่วนโต้ตอบกับผู้ใช้ อย่างน้อยก็ในลักษณะของฟอร์มต่างๆ ซึ่งในการทำงานส่วนนี้ จำเป็นต้องอาศัยความสามารถด้านโปรแกรมมากำกับ แต่ในขั้นต้นนี้ผู้ที่สนใจก็สามารถสร้างส่วนโต้ตอบ กับผู้ใช้ได้โดยอาศัยเทคนิคการผสม Form กับคำสั่งMailto: ได้เช่นกัน โดยจะเป็นการสร้างฟอร์มส่งรายงานเข้ามายังอีเมล์ของผู้พัฒนาผ่านคำสั่ง Mailto นั่นเอง

หลักการสร้างฟอร์ม

                1.  คลิกเมาส์ ณ ตำแหน่งที่ต้องการวางฟอร์ม 

                2.  เปลี่ยนแถบเครื่องมือ Object เป็น Form โดยคลิกที่ปุ่ม Control Menu ซึ่งมีรูปร่างเป็นปุ่มสามเหลี่ยมชี้ลง แล้วเลือกรายการ Form

                3.  คลิกเลือกเครื่องมือกำหนดตำแหน่งการสร้างฟอร์ม  จะปรากฏเส้นประสีแดงในเอกสาร ณ ตำแหน่งที่วาง Cursor ซึ่งต่อไปเมื่อต้องการวัตถุเกี่ยวกับการสร้างฟอร์ม จะต้องตรวจสอบ Cursor ให้อยู่ในกรอบสีแดงนี้ก่อนเสมอ 

                4.  สังเกตที่บัตร Properties จะมีรายการต่างๆ ดังนี้

                5. ให้พิมพ์คำบังคับ mailto:E-Mail Address ในบรรทัด Action เช่น ถ้าผู้พัฒนาเอกสารเว็บมีอีเมล์ คือ boonlert@nectec.or.th ก็ให้ระบุรายการในบรรทัด Actionดังนี้

                6.  เมื่อกำหนดคุณสมบัติของฟอร์มตามข้อ 5. แล้ว ต่อไปก็จะเป็นการวางวัตถุต่างๆ ในฟอร์ม ซึ่งประกอบด้วยวัตถุสำคัญๆ ดังนี้

o    ฟิลด์กรอกข้อความ (Text Field) ทั้งตัวอักษรและตัวเลข

o    ฟิลด์ตัวเลือกแบบ CheckBox

o    ฟิลด์ตัวเลือกแบบ Radio Button

o    ฟิลด์รายการ (List/Menu Field)

o    ฟิลด์ปุ่ม (Button Field)

                วัตถุในฟอร์มที่แนะนำ เป็นฟิลด์หรือวัตถุพื้นฐานที่สามารถนำมาใช้งานได้กับคำสั่ง Mailto: ส่วนฟิลด์ที่เหลือจะเป็นส่วนที่ต้องทำงานกับโปรแกรมมิ่ง ดังนั้นจึงไม่ได้แนะนำ แต่อย่างไรก็ตามก็มีหลักการนำมาใช้ใกล้เคียงกัน และการควบคุมตำแหน่งของฟอร์มจำเป็นต้องอาศัย Table มาจัดการ

ฟิลด์กรอกข้อความ (Text Field)

                ฟิลด์กรอกข้อความ (Text Field)เป็นฟิลด์สำหรับสร้างส่วนรับ แสดงข้อมูลทั้งตัวอักษรและตัวเลข ซึ่งมี Properties ที่ต้องระบุคือ

·         TextField Name

กำหนดชื่อฟิลด์ใช้ในการอ้างอิงกับโปรแกรม ต้องระบุเสมอ เช่น หากต้องการให้ฟิลด์นี้เก็บข้อมูลเกี่ยวกับ ชื่อ/นามสกุล อาจจะตั้งชื่อฟิลด์เป็น F-Lname เป็นต้น

·         Char Width

กำหนดความกว้างของฟิลด์ มีหน่วยเป็นตัวอักษร

·         Max Chars

กำหนดจำนวนอักษรสูงสุดที่ยอมให้ป้อนในฟิลด์ มีหน่วยเป็นตัวอักษร

·         Type 

ประเภทของฟิลด์ข้อความ ได้แก่ ฟิลด์แบบบรรทัดเดียว (Single Line), ฟิลด์แบบหลายบรรทัด(Multi Line) และฟิลด์แบบรหัสผ่าน (Password) ซึ่งจะแสดงเครื่องหมาย * เมื่อมีการป้อนข้อมูลในฟิลด์นี้

·         Init Val

ระบุข้อความที่ต้องการให้แสดงในฟิลด์นี้ทุกครั้งที่มีการแสดงผลผ่านเบราเซอร์

·         Wrap 

ควบคุมการตัดคำเมื่อเลือก Type เป็น Multi Line

ฟิลด์ตัวเลือก Checkbox

               ฟิลด์ตัวเลือก Checkbox     ใช้สำหรับรายการเลือกที่จะเลือก หรือไม่เลือกก็ได้ และไม่จำกัดจำนวนตัวเลือก เช่น วุฒิการศึกษา, สิ่งที่ชอบ,รายการที่ชอบ เป็นต้น ซึ่งมี Properties ที่ต้องระบุคือ

·         Checkbox Name

กำหนดชื่อฟิลด์ใช้ในการอ้างอิงกับโปรแกรม ต้องระบุเสมอ เช่น หากต้องการให้ฟิลด์นี้เก็บข้อมูลเกี่ยวกับเพศ อาจจะตั้งชื่อฟิลด์เป็น Sex เป็นต้น

·         Checkbox Value 

กำหนดค่าของฟิลด์ เช่น ถ้าต้องการให้ระบุว่าฟิลด์นี้เก็บค่าของเพศชาย ก็อาจจะกำหนดค่าเป็น Male เป็นต้น

·         Initial State 

ตัวเลือกว่าจะให้ฟิลด์ Checkbox นี้ถูกเลือกไว้ก่อนหรือไม่ ถ้าเลือกเป็น Checked จะปรากฏเครื่องหมาย x ในช่องฟิลด์นี้ทุกครั้งที่เรียกผ่านเว็บ

ฟิลด์ตัวเลือก Radio Button

                ฟิลด์ตัวเลือก Radio Button     สำหรับรายการที่ใช้เลือก เช่น เพศชาย/หญิง ซึ่งมี Properties ที่ต้องระบุเหมือนกับ Checkbox เพียงแต่ฟิลด์แบบนี้อนุญาตให้เลือกได้เพียง 1 รายการเท่านั้น ในขณะนี้ Checkboxสามารถคลิกเลือกได้ทุกรายการที่ระบุ

ฟิลด์รายการ (List/Menu Field)\

ฟิลด์รายการ (List/Menu Field)       สำหรับรายการเลือกแบบเมนู ซึ่งมีตัวเลือกหลายตัวเลือก เช่น วุฒิการศึกษา ตั้งแต่ ปวช., ปวส., ปริญญาตรี เป็นต้น ซึ่งมีProperties ที่ต้องระบุดังนี้

·         List/Menu กำหนดชื่อฟิลด์ใช้ในการอ้างอิงกับโปรแกรม ต้องระบุเสมอ เช่น หากต้องการให้ฟิลด์นี้เก็บข้อมูลเกี่ยวกับวุฒิการศึกษา อาจจะตั้งชื่อฟิลด์เป็นeducation เป็นต้น

·         Type เลือกประเภทของรายการว่าจะให้แสดงเป็น List หรือเป็นเมนู Drop Down

·         Height ความสูงของเมนู 

Selections อนุญาตให้ผู้ใช้เลือกรายการจากเมนูได้มากกว่า 1 รายการหรือไม่ โดยถ้าอนุญาตให้เลือกรายการได้มากกว่า 1 รายการ ผู้ใช้สามารถใช้ปุ่ม    หรือ <Ctrl> ควบคุมการเลือกได้

·         List Values ปุ่มกำหนดค่าของรายการเมนู โดยเมื่อคลิกจะปรากฏหน้าต่างทำงาน ดังนี้

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

o    เมื่อกำหนดค่าที่ต้องการ ก็คลิกปุ่ม OK เพื่อยืนยันการบันทึกค่าและใช้งาน

·         Initial Selection ตัวเลือกเพื่อกำหนดว่ารายการใดจะให้แสดงเป็นค่าเริ่มต้นเมื่อมีการเรียกใช้งาน

ฟิลด์ปุ่ม (Button Field)

                ฟิลด์ปุ่ม (Button Field)    รายการเลือกสำหรับสร้างปุ่มส่งข้อมูล(Submit) หรือยกเลิกการป้อนข้อมูลในฟอร์ม (Reset) โดยมี Properties สำคัญดังนี้

                - Button Name กำหนดชื่อฟิลด์ใช้ในการอ้างอิงกับโปรแกรม ต้องระบุเสมอ เช่น หากต้องการให้ฟิลด์นี้ทำหน้าที่ส่งข้อมูล ก็อาจจะตั้งชื่อฟิลด์เป็น Submit เป็นต้น

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

                - Action ตัวเลือกว่าปุ่มนี้จะทำหน้าที่ในการส่งข้อมูล (Submit Form) หรือเคลียร์ค่าในฟอร์ม (Reset Form) หรือไม่ต้องทำหน้าที่ใดๆ

                 File Field      เป็นการดึงไฟล์จากเครื่องของคุณ เพื่อที่จะส่งไปยังปลายทาง โดยจะเห็นได้ทั่ว ๆ ไปจากเว็บเซิร์ฟเวอร์ต่าง ๆ ที่ให้คุณดึงไฟล์จากในเครื่องเพื่ออัพโหลด

ตัวอย่าง                                         Browse

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

                 Jump Menu      การใช้งานคล้าย ๆ กับออบเจ็กต์ Insert List/Menuแต่ต่างกันตรงที่เอาไว้เชื่อมไปยัง เว็บเพจ ปลายทาง ทันที่ทีมีการเลือกตัวเลือกอื่น แล้วกดปุ่มมันก็จะพาเราลิงค์ไปยังเว็บเพจที่ได้มีการกำหนดไว้