<< Go Back

           ในการสร้างเว็บเพจ บางครั้งจำเป็นต้องมีฟอร์มเพื่อขอรับข้อมูลจากผู้ใช้ เช่นการลงทะเบียนเข้าเป็นสมาชิก การสั่งซื้อสินค้า ซึ่งการสร้างแบบฟอร์มประเภทนี้ ใน Dreamweaver ได้จัดเตรียมตัวควบคุมที่เรียกว่า ฟอร์มออบเจ็ค (Form object) ไว้ทำหน้าที่ในการจัดการควบคุมส่วนต่าง ๆ ในแบบฟอร์ม เพื่อให้เราสามารถสร้างแบบฟอร์มได้โดยง่าย

           1. คลิกเมาส์ลงในตำแหน่งที่จะทำการสร้างฟอร์ม
           2. คลิกที่เมนูคำสั่ง Insert เลือกคำสั่ง Form หรือคลิกที่แถบ Insert เลือก แท็บ Forms แล้วคลิกที่ปุ่ม   Forms

           3. กำหนดค่าต่าง ๆ ในพาเนล Properties


          

           Post ผนวกข้อมูลไปกับ http
           Get ส่งข้อมูลไปยัง url ที่ใช้ประมวลผลฟอร์มนี้
           Default ใช้ตามวิธีของบราวเซอร์ซึ่งปกติจะเป็น get

           องค์ประกอบต่าง ๆ ของฟอร์มสามารถเลือกได้โดยคลิกเมาส์ที่เมนูคำสั่ง Insert เลือกคำสั่ง Form Object หรือเลือกจากแถบ Insert ในแท็บ Forms ซึ่งมีดังต่อไปนี้

รายละเอียดของไอคอนใน Forms

         Text field แสดงช่องให้พิมพ์ข้อความ

         Hidden field ฟิวส์ซ่อน

         Textarea แสดงเขตข้อมูลให้พิมพ์ข้อความยาว ๆ ได้หลายบรรทัด

         Check box ใช้สำหรับตัวเลือกที่จะให้เลือกหรือไม่เลือก

         Radio button แสดงตัวเลือกหลายตัวเลือกให้เลือก

         Radio group ใช้กับตัวเลือกที่มีหลายตัวเลือก แต่ให้เลือกได้แค่ตัวเลือกเดียว

         List menu แสดงตัวเลือกหลายตัวเลือกเมื่อผู้ใช้ต้องการในรูปแบบเมนู

         Jump menu สร้างตัวเลือกที่เชื่อมโยงไปยังเว็บเพจหรือไฟล์

         Image field ใส่รูปภาพลงในฟอร์ม

         File field ให้ผู้ใช้สามารถเลือกไฟล์ในฮาร์ดดิสก์ได้

         Button สร้างปุ่มเพื่อให้ผู้ใช้คลิก

         Field set สร้างกลุ่มรวมของฟอร์ม

Text Field เป็นออบเจ็คที่ให้ผู้ชมใช้ในการกรอกข้อความ ซึ่งมีอยู่ 3 แบบด้วยกัน คือ
           1. Single-line Text Fields ใช้ในการกรอกข้อความที่ไม่ยาวมากนัก เช่น ชื่อ ที่อยู่ เป็นต้น
           2. Multiple-line Text Fields ใช้ในการกรอกข้อความที่ยาว ๆ เช่น คำแนะนำต่าง ๆ
           3. Password Fields ใช้ในการกรอกรหัสผ่าน ซึ่งตัวอักษรจะถูกแทนที่ด้วยเครื่องหมายดอกจัน หรือ เครื่องหมายอื่น เพื่อกัน ไม่ให้ผู้อื่น เห็นขณะพิมพ์

           1. คลิกเมาส์ลงบนตำแหน่งที่จะทำการสร้าง ฟอร์ม
           2. คลิกเมาส์ที่เมนูคำสั่ง Insert เลือกคำสั่ง Form Object เลือกคำสั่ง Text Field หรือคลิกที่แถบ Insert เลือกแท็บ Forms แล้วคลิกที่ปุ่ม จะมีบล็อกขึ้นให้คลิก Cancel

3. กำหนดค่าในส่วนของพาเนล Properties

         1. คลิกเมาส์ลงบนตำแหน่งที่จะทำการสร้างฟอร์ม
         2. คลิกเมาส์ที่เมนูคำสั่ง Insert เลือกคำสั่ง Form Object เลือกคำสั่ง Text field หรือ คลิกที่แถบ Insert เลือกแท็บ Forms แล้วคลิกที่ปุ่ม

         3. กำหนดค่าในส่วนของพาเนล Properties

         # default ไม่ให้ข้อความตัดขึ้นบรรทัดใหม่เมื่อพิมพ์ถึงขอบขวาของกรอบ ข้อความจะเลื่อนไปทางซ้ายหากต้องการขึ้นบรรทัดใหม่ให้กด enter
         # virtual ตัดข้อความขึ้นบรรทัดใหม่เมื่อพิมพ์ถึงขอบขวาของกรอบ เพื่อแสดง บนจอภาพเท่านั้น แต่ข้อความจริงยังคงต่อเนื่องกัน
         # physical ตัดข้อความขึ้นบรรทัดใหม่เมื่อพิมพ์ถึงขอบขวาของกรอบ ทั้งที่แสดง บนจอภาพและข้อความจริง

          Check box เป็นออบเจ็คที่ใช้สร้างกลุ่มตัวเลือก โดยสามารถเลือกได้มากกว่า 1 ตัวเลือก
          1. คลิกเมาส์ลงบนตำแหน่งที่จะทำการสร้างฟอร์ม
          2. คลิกเมาส์ที่เมนูคำสั่ง Insert เลือกคำสั่ง Form Object เลือกคำสั่ง Check Box หรือคลิกที่แถบ Insert เลือกแท็บ Forms แล้วคลิกที่ปุ่ม

          3. กำหนดค่าในส่วนของพาเนล Properties

Radio Button จะใช้ในการสร้างรายการตัวเลือกที่ให้ผู้ใช้เลือกเพียงตัวเลือกเดียว โดยมีวิธีการสร้างดังต่อไปนี้
         1. คลิกเมาส์ลงบนตำแหน่งที่จะทำการสร้าง ฟอร์ม
         2. คลิกเมาส์ที่เมนูคำสั่ง Insert เลือกคำสั่ง Form Object เลือกคำสั่ง Radio Button หรือ คลิกที่แถบ Insert เลือกแท็บ Forms แล้วคลิกที่ปุ่ม

         3. กำหนดค่าในส่วนของพาเนล Properties

       1. คลิกเมาส์ลงบนตำแหน่งที่จะทำการสร้าง ฟอร์ม
       2. คลิกเมาส์ที่เมนูคำสั่ง Insert เลือกคำสั่ง Form Object เลือกคำสั่ง Radio Group หรือ คลิกที่แถบ Insert เลือกแท็บ Forms แล้วคลิกที่ปุ่ม
       3. กำหนดค่าในหน้าต่าง Radio Group

       4. คลิกที่ปุ่ม OK จะได้รูปแบบ Radio Group ขึ้นมาให้จัดตำแหน่งให้สวยงาม

       List ใช้ในการสร้างกลุ่มตัวเลือกที่มีตัวเลือกค่อนข้างมาก โดยผู้ใช้อาจเลือกมากกว่า 1 ตัวเลือกได้ ในขณะที่ Menu จะให้ผู้ใช้เลือกเพียงตัวเลือกเดียว

        1. คลิกเมาส์ลงบนตำแหน่งที่จะทำการสร้าง ฟอร์ม
        2. คลิกเมาส์ที่เมนูคำสั่ง Insert เลือกคำสั่ง Form Object เลือกคำสั่ง List/Menu หรือ คลิกที่แถบ Insert เลือกแท็บ Forms แล้วคลิกที่ปุ่ม List/Menu
        3. กำหนดค่าต่างๆ ใน พาเนล Properties ตั้งชื่อให้กับรายการและ เลือก Type เป็น Menu

        4. คลิกเมาส์ที่ปุ่ม เพื่อใส่ตัวเลือกต่างๆในรายการ จากนั้นคลิกที่ปุ่ม OK

        5. ในส่วนของ Initially Selected ให้เลือกตัวเลือกที่จะให้แสดงบนเว็บเพจ เป็นตัวเลือกหลัก

        6. การแสดงรายการของ Menu

         1. คลิกเมาส์ลงบนตำแหน่งที่จะทำการสร้าง ฟอร์ม
         2. คลิกเมาส์ที่เมนูคำสั่ง Insert เลือกคำสั่ง Form Object เลือกคำสั่ง List/Menu หรือ คลิกที่แถบ Insert เลือกแท็บ Forms แล้วคลิกที่ปุ่ม List/Menu
         3. กำหนดค่าต่างๆ ใน พาเนล Properties ตั้งชื่อให้กับรายการและ เลือก Type เป็น List

         4. คลิกเมาส์ที่ปุ่ม เพื่อใส่ตัวเลือกต่างๆในรายการ จากนั้นคลิกที่ปุ่ม OK

         5. ในส่วนของ Initially Selected ให้เลือกตัวเลือกที่จะให้แสดงบนเว็บเพจ เป็นตัวเลือกหลัก

         6. กำหนดให้เลือก Selections    Allow multiple เพื่อให้สามารถ เลือกตัวเลือกได้หลายตัวเลือก
         7. การแสดงรายการของ list เมื่ออยู่ในเว็บบราวเซอร์เราจะสามารถใช้แถบเลื่อนใน การเลื่อนดูตัวเลือกต่าง ๆ ได้ และหากกำหนดให้เลือก ได้หลายตัวเลือก ผู้ใช้จะ สามารถใช้ปุ่ม Ctrl หรือ Shift ร่วมกับการคลิกเพื่อเลือกหลายตัวเลือกได้

         ปุ่มมาตรฐานที่โปรแกรมจัดเตรียมไว้ให้ จะเป็นปุ่มที่มักจะต้องใช้ในทุกแบบฟอร์ม ซึ่งได้แก่ปุ่ม Submit หรือ Send ที่ใช้ในการส่งข้อมูลในแบบฟอร์มไปยังเว็บไซต์ , ปุ่ม Reset ที่ใช้ในการเริ่มกรอกข้อมูลใหม่ เป็นต้น
         1. คลิกเมาส์ลงบนตำแหน่งที่จะทำการสร้าง ฟอร์ม
         2. คลิกเมาส์ที่เมนูคำสั่ง Insert เลือกคำสั่ง Form object เลือกคำสั่ง Button หรือ คลิกที่แถบ Insert เลือกแท็บ Forms แล้วคลิกที่ปุ่ม Button

         3. คลิกที่ปุ่ม บนหน้าเอกสารเพื่อปรับแต่งในส่วน Properties

         4. เราสามารถเปลี่ยนข้อความบนปุ่มตามที่เราต้องการได้ในช่อง Label
         5. หากเราต้องการให้ Button เป็นปุ่มที่ใช้ในการเริ่มกรอกข้อมูลใหม่เราสามารถที่ จะปรับแต่งในส่วนของ Properties ให้เป็น Reset Form


นอกจากปุ่มมาตรฐานที่โปรแกรมจัดเตรียมไว้ให้แล้ว เรายังสามารถสร้างปุ่มขึ้นมาเองได้โดยใช้รูปภาพมาทำเป็นปุ่มได้อีกด้วย
           1. คลิกเมาส์ลงบนตำแหน่งที่จะทำการสร้าง ฟอร์ม
           2. คลิกเมาส์ที่เมนูคำสั่ง Insert เลือกคำสั่ง Form Object เลือกคำสั่ง Image field หรือ คลิกที่แถบ Insert เลือกแท็บ Forms แล้วคลิกที่ปุ่ม Image Field
           3. คลิกเมาส์เลือกรูปภาพที่ต้องการจากหน้าต่าง Select Image Source เมื่อได้ภาพที่ต้องการแล้วให้คลิกที่ปุ่ม OK

           4. คลิกที่ปุ่ม รูปภาพเพื่อกำหนดค่าต่างๆ ในพาเนล Properties

           เราสามารถสร้างฟิลด์ที่ให้ผู้ใช้สามารถเลือกไฟล์ในเครื่องของตนเพื่อส่งไปยังเว็บไซต์ได้ โดยฟิลด์ที่ได้จะมีลักษณะเหมือน Text Field ที่มีปุ่ม Browse ติดมาด้วยซึ่งผู้ใช้อาจจะพิมพ์ชื่อไฟล์ลงไปตรง ๆ หรือคลิกที่ปุ่ม Browse เพื่อไปเลือกไฟล์ก็ได้ แต่อย่างไรก็ดีฟิลด์ชนิดนี้จำเป็นจะต้องสร้างลงในฟอร์มแบบ Post Method และต้องแน่ใจว่าเว็บไซต์นั้นอนุญาตให้เราส่งไฟล์เข้าไปได้
1. คลิกที่เส้นกรอบฟอร์มเพื่อตั้งค่าของฟอร์ม

                      กำหนดค่า Method >>>> post
                      กำหนดค่า Enctype >>>> multipart/form-data
                      กำหนดค่า Action >>>> ใส่ url ของเว็บไซต์ที่จะไฟล์ไปถึง
           2. คลิกเมาส์ลงบนตำแหน่งที่จะทำการสร้าง ฟอร์ม
           3. คลิกเมาส์ที่เมนูคำสั่ง Insert เลือกคำสั่ง Form Object เลือกคำสั่ง File Field หรือ คลิกที่แถบ Insert เลือกแท็บ Forms แล้วคลิกที่ปุ่ม File Field 

           4. กำหนดค่าต่างๆ ใน พาเนล Properties

        Hidden Field เป็น Text Field ชนิดหนึ่งที่ใช้ในการเก็บข้อมูลเกี่ยวกับผู้ชมเพื่อส่งกลับไปยังเว็บไซต์เพื่อนำไปใช้ประโยชน์ต่อไป โดยฟิลด์นี้จะไม่แสดงให้ผู้ชมเห็น
        1. คลิกเมาส์ลงบนตำแหน่งที่จะทำการสร้าง ฟอร์ม
        2. คลิกเมาส์ที่เมนูคำสั่ง Insert เลือกคำสั่ง Form Object เลือกคำสั่ง Hidden Field หรือ คลิกที่แถบ Insert เลือกแท็บ Forms แล้วคลิกที่ปุ่ม

        3. คลิกที่สัญลักษณ์ Hidden Field เพื่อกำหนดค่าต่างๆ ในพาเนล Properties

          Jump Menu เป็นการสร้างรายการในแบบเมนู ที่แต่ละตัวเลือกมีการเชื่อมโยงไปยังไฟล์หรือเว็บไซต์อื่น
          1. คลิกเมาส์ลงบนตำแหน่งที่จะทำการสร้าง ฟอร์ม
          2. คลิกเมาส์ที่เมนูคำสั่ง Insert เลือกคำสั่ง Form Object เลือกคำสั่ง Jump Menu หรือ คลิกที่แถบ Insert เลือกแท็บ Forms แล้วคลิกที่ปุ่ม Jump menu    จะปรากฏหน้าต่างให้เราทำการกำหนดค่าต่าง ๆ ลงไป

          3. ใส่รายการตัวเลือกและเป้าหมายเมื่อครบแล้วเลือก OK
          4. เราสามารถปรับแต่งค่าต่าง ๆ ได้ในพาเนล Properties โดยคลิกที่สัญลักษณ์ Jump menu บนฟอร์ม

          5. หลังจากคลิกที่สัญลักษณ์ Jump Menu บนฟอร์ม จะปรากฏหน้าต่าง Properties ให้เราทำการปรับแต่งค่าได้ โดยคลิกที่ปุ่ม เพื่อทำการปรับเปลี่ยนตัวเลือกได้ตามต้องการ

          6. หลังจากคลิกที่ปุ่ม แล้วจะปรากฏหน้าต่างให้ปรับตั้งค่าดังนี้

          7. เมื่อปรับเปลี่ยนตัวเลือกได้ตามที่ต้องการแล้วให้คลิกที่ปุ่ม OK
          8. ส่วน Initially Selected ให้เลือกว่าต้องการให้ Item ใดแสดง เป็นอันดับแรก

 

<< Go Back