Lesson 6

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

2. 129
3. กาหนดค่าต่าง ๆ ในพาเนล Properties
การเลือกวิธีการส่งข้อมูลไปยังเซิร์ฟเวอร์
Post ผนวกข้อมูลไปกับ http
Get ส่งข้อมูลไปยัง url ที่ใช้ประมวลผลฟอร์มนี้
Default ใช้ตามวิธีของบราวเซอร์ซึ่งปกติจะเป็น get
กำหนดตำแหน่งเว็บเพจที่ใช้ในกำรประมวลผลฟอร์ม
ตั้งชื่อฟอร์ม
เลือกวิธีกำรส่งข้อมูล
ไปยัง เซิร์ฟเวอร์
กำหนดชนิดของกำรเข้ำรหัส

3. 130
องค์ประกอบของฟอร์ม (Form Object)
องค์ประกอบต่าง ๆ ของฟอร์มสามารถเลือกได้โดยคลิกเมาส์ที่เมนูคาสั่ง 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 สร้างกลุ่มรวมของฟอร์ม

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

5. 132
3. กาหนดค่าในส่วนของพาเนล Properties
ตั้งชื่อ Text Field
Char Width กำหนดขนำดของช่องกรอกข้อควำม หำกไม่กำหนดจะเท่ำกับ 20 ตัวอักษร
Max Chars
กำหนดควำมยำวสูงสุดของข้อควำม
หำกไม่ระบุผู้กรอกจะใส่เท่ำไหร่ก็ได้

6. 133
การเลือกชนิดของข้อมูลเป็นแบบ Multi line
1. คลิกเมาส์ลงบนตาแหน่งที่จะทาการสร้างฟอร์ม
2. คลิกเมาส์ที่เมนูคาสั่ง Insert เลือกคาสั่ง Form Object เลือกคาสั่ง Text field หรือ
คลิกที่แถบ Insert เลือกแท็บ Forms แล้วคลิกที่ปุ่ม
3. กาหนดค่าในส่วนของพาเนล Properties
# default ไม่ให้ข้อความตัดขึ้นบรรทัดใหม่เมื่อพิมพ์ถึงขอบขวาของกรอบ
ข้อความจะเลื่อนไปทางซ้ายหากต้องการขึ้นบรรทัดใหม่ให้กด enter
# virtual ตัดข้อความขึ้นบรรทัดใหม่เมื่อพิมพ์ถึงขอบขวาของกรอบ เพื่อแสดง
บนจอภาพเท่านั้น แต่ข้อความจริงยังคงต่อเนื่องกัน
# physical ตัดข้อความขึ้นบรรทัดใหม่เมื่อพิมพ์ถึงขอบขวาของกรอบ ทั้งที่แสดง
บนจอภาพและข้อความจริง
ตั้งชื่อ TextField ควำมกว้ำงของฟิลด์
จำนวนบรรทัด
เลือกวิธีการแสดงข้อความในกรอบ Wrap

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

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

9. 136
การสร้างเป็นกลุ่มตัวเลือก Radio Group
1. คลิกเมาส์ลงบนตาแหน่งที่จะทาการสร้าง ฟอร์ม
2. คลิกเมาส์ที่เมนูคาสั่ง Insert เลือกคาสั่ง Form Object เลือกคาสั่ง Radio Group หรือ
คลิกที่แถบ Insert เลือกแท็บ Forms แล้วคลิกที่ปุ่ม
3. กาหนดค่าในหน้าต่าง Radio Group
4. คลิกที่ปุ่ม OK จะได้รูปแบบ Radio Group ขึ้นมาให้จัดตาแหน่งให้สวยงาม
ตั้งชื่อกลุ่มตัวเลือก
เพิ่ม-
ลบตัวเลือ
ก
พิมพ์ข้อควำมข
องตัวเลือก
กำหนดค่ำที่จะส่งไปยังเ
ซิร์ฟเวอร์
แสดงเป็นบรรทัด
แสดงเป็นตำรำง

10. 137
การสร้างรายการตัวเลือก List/menu
List ใช้ในการสร้างกลุ่มตัวเลือกที่มีตัวเลือกค่อนข้างมาก โดยผู้ใช้อาจเลือกมากกว่า 1
ตัวเลือกได้ ในขณะที่ Menu จะให้ผู้ใช้เลือกเพียงตัวเลือกเดียว
การสร้างรายการแบบ Pop-Up Menu
1. คลิกเมาส์ลงบนตาแหน่งที่จะทาการสร้าง ฟอร์ม
2. คลิกเมาส์ที่เมนูคาสั่ง Insert เลือกคาสั่ง Form Object เลือกคาสั่ง List/Menu หรือ
คลิกที่แถบ Insert เลือกแท็บ Forms แล้วคลิกที่ปุ่ม List/Menu
3. กาหนดค่าต่างๆ ใน พาเนล Properties ตั้งชื่อให้กับรายการและ
เลือก Type เป็น Menu
4. คลิกเมาส์ที่ปุ่ม เพื่อใส่ตัวเลือกต่างๆในรายการ จากนั้นคลิกที่ปุ่ม OK
ตั้งชื่อให้กับรำยกำร
เลือกแบบรำยกำรที่ต้องกำรให้แสดง
เพิ่ม-ลบตัวเลือก จัดลำดับตัวเลือก
พิมพ์ตัวเลือกที่
ต้องกำรลงไป
กำหนดค่ำที่จะส่งไปยังเซิร์ฟเวอร์
เมื่อผู้ใช้เลือกตัวเลือกนั้น

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

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

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

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

15. 142
4. คลิกที่ปุ่ม รูปภาพเพื่อกาหนดค่าต่างๆ ในพาเนล Properties
ผลลัพธ์ที่ได้
การสร้าง File Upload Field
เราสามารถสร้างฟิ ลด์ที่ให้ผู้ใช้สามารถเลือกไฟล์ในเครื่องของตนเพื่อส่งไปยังเว็บ ไซต์ได้
โ ด ย ฟิ ล ด์ ที่ ไ ด้ จ ะ มี ลั ก ษ ณ ะ เ ห มื อ น Text Field ที่ มี ปุ่ ม Browse
ติดมาด้วยซึ่งผู้ใช้อาจจะพิมพ์ชื่อไฟล์ลงไปตรง ๆ หรือคลิกที่ปุ่ ม Browse เพื่อไปเลือกไฟล์ก็ได้
แ ต่อ ย่า ง ไ ร ก็ดี ฟิ ล ด์ ช นิ ด นี้ จ าเป็ น จ ะ ต้อ ง ส ร้ า ง ล ง ใ น ฟ อ ร์ ม แ บ บ Post Method
และต้องแน่ใจว่าเว็บไซต์นั้นอนุญาตให้เราส่งไฟล์เข้าไปได้
1. คลิกที่เส้นกรอบฟอร์มเพื่อตั้งค่าของฟอร์ม
กาหนดค่า Method >>>> post
กาหนดค่า Enctype >>>> multipart/form-data
กาหนดค่า Action >>>> ใส่ url ของเว็บไซต์ที่จะไฟล์ไปถึง
คำอธิบำยภำพชื่อฟิลด์ แก้ไขภำพ
ชื่อโฟลเดอร์/ชื่อไฟล์ จัดตำแหน่งภำพ

16. 143
2. คลิกเมาส์ลงบนตาแหน่งที่จะทาการสร้าง ฟอร์ม
3. คลิกเมาส์ที่เมนูคาสั่ง Insert เลือกคาสั่ง Form Object เลือกคาสั่ง File Field หรือ
คลิกที่แถบ Insert เลือกแท็บ Forms แล้วคลิกที่ปุ่ม File Field
4. กาหนดค่าต่างๆ ในพาเนล Properties
ควำมยำวสูงสุดของตำแหน่งและชื่อไ
ฟล์หำกไม่ระบุจะถือเท่ำไหร่ก็ได้
ตั้งชื่อฟิลด์
ขนำดของช่องกรอกตำแหน่งแ
ละชื่อไฟล์หำกไม่ระบุถือว่ำเป็
น 20 ตัวอักษร

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

18. 145
การสร้าง Jump Menu
Jump Menu เ ป็ น ก า ร ส ร้ า ง ร า ย ก า ร ใ น แ บ บ เ ม นู
ที่แต่ละตัวเลือกมีการเชื่อมโยงไปยังไฟล์หรือเว็บไซต์อื่น
1. คลิกเมาส์ลงบนตาแหน่งที่จะทาการสร้าง ฟอร์ม
2. คลิกเมาส์ที่เมนูคาสั่ง Insert เลือกคาสั่ง Form Object เลือกคาสั่ง Jump Menu หรือ
คลิกที่แถบ Insert เลือกแท็บ Forms แล้วคลิกที่ปุ่ม Jump menu
จะปรากฏหน้าต่างให้เราทาการกาหนดค่าต่าง ๆ ลงไป
เพิ่ม–ลบ ตัวเลือก จัดลำดับตัวเลือก
กำหนดเป้ ำหมำยที่จะไปเมื่อผู้ใช้เลือ
กตัวเลือกนี้ โดยกำหนดไฟล์ หรือ
URL ให้ถูกต้อง เช่น
http://www.bkk-software.co.thกำหนดให้มีปุ่ม
GO ต่อท้ำย
ให้กลับมำตัวเลือกแรกเมื่อ
มีกำรไปยังเว็บไซต์อื่น

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

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