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

Dreamweaver 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 ปุ่มกำหนดค่าของรายการเมนู โดยเมื่อคลิกจะปรากฏหน้าต่างทำงาน ดังนี้

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

เมื่อกำหนดค่าที่ต้องการ ก็คลิกปุ่ม 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 แต่ต่างกันตรงที่เอาไว้เชื่อมไปยัง เว็บเพจ ปลายทาง ทันที่ทีมีการเลือกตัวเลือกอื่น แล้วกดปุ่มมันก็จะพาเราลิงค์ไปยังเว็บเพจที่ได้มีการกำหนดไว้