ถ้าต้องการสร้างกล่องรับข้อมูลจากผู้ชมเว็บสำหรับคำถามปลายเปิด

เรื่อง : การสร้าง Form และ Input เพื่อให้ผู้ใช้เว็บกรอกข้อมูลโดยใช้ Dreamweaver

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

วิธีการสร้างฟอร์มและอินพุตด้วย Dreamweaver

ในการสร้างฟอร์มและอินพุตนั้น มีขั้นตอนอยู่ 3 ขั้นตอน ที่เราควรทราบ ดังนี้
1. สร้างฟอร์ม (Form)
2. สร้างอินพุต (Input) ต่างๆ ลงไปที่ฟอร์ม หรือให้อยู่ภายในฟอร์ม
3. สร้างปุ่ม Submit หรือปุ่มส่งข้อมูลไปประมวลผล
ซึ่งทั้ง 3 ขั้นตอนนี้ให้กระทำโดยลำดับ ดังนี้

1. สร้างฟอร์ม (Form) ให้เสร็จเสียก่อน

ขั้นตอนแรกต้องสร้างฟอร์มขึ้นมาเสียก่อน ดังนี้

1. นำ Cursor วางยังตำแหน่งที่ต้องการแสดงฟอร์ม
2. จากนั้นที่ Insert เลือกที่ Form และเลือกไปที่ไอคอน Form ดังรูป

เป็นอันเสร็จสิ้นในส่วนของการสร้างฟอร์ม

2. สร้างอินพุต (Input) ลงไปที่ฟอร์ม

เมื่อได้สร้างฟอร์มเสร็จสิ้นแล้ว จากนั้นจึงทำการสร้างอินพุตให้แก่ฟอร์มต่อไป ดังนี้

5. ที่ในระหว่างเส้นประสีแดง (หรือฟอร์ม) นำ Cursor ไปวาง
6. จากนั้นไปที่ Insert->Form เลือกไปที่รูปแบบอินพุตที่เราต้องการ ดังรูป

7. โปรแกรมจะสร้างอินพุตลงไปที่ฟอร์มให้เรา ดังรูป

ข้างต้นคือขั้นตอนการสร้างอินพุตที่สำคัญ ซึ่งคุณสามารถสร้างอินพุตอื่น ๆ ได้โดยลักษณะเดียวกับที่อธิบายมา ดังในรูปด้านล่างนี้ มีการเพิ่มอินพุตอื่นลงไปที่ฟอร์มอีก 2 อินพุต

3. สร้างปุ่ม Submit หรือปุ่มส่งข้อมูล

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

9. นำ Cursor ไปวางยังตำแหน่งที่ต้องการแสดงปุ่ม Submit นี้ (แต่ต้องอยู่ในเส้นประสีแดงด้วยนะครับ)
10. จากนั้นไปที่ Insert->Form-> Submit Button

เป็นอันเสร็จสิ้นการสร้างฟอร์ม
ให้สังเกตนะครับว่า Input ทั้งหมด แม้แต่ปุ่ม Submit ต้องอยู่ภายในเส้นประสีแดง หรืออยู่ภายใน Form ทั้งหมด...

คลิปหลักการสร้าง Form/ฟอร์ม และ Input

อ่านบทความแล้ว หากต้องการเรียนรู้เรื่องวิธีการสร้างฟอร์ม และอินพุตเพิ่มเติม ท่านอาจรับชมศึกษาได้จากคลิปนี้ ซึ่งภายในคลิปการเรียนรู้นี้ แนะนำการสร้างฟอร์มโดยใช้ทั้ง Dreamweaver CS6 และ Dreamweaver CC

*คลิกที่โลโก้ YouTube เพื่อเข้าดูที่ยูทูปนะครับ จะสามารถขยายจอดูได้

การรับค่าจาก Form

สำหรับการรับค่าจาก Form นั้น ท่านสามารถศึกษาได้จากคลิปการเรียนรู้นี้

*คลิกที่โลโก้ YouTube เพื่อเข้าดูที่ยูทูปนะครับ จะสามารถขยายจอดูได้

About the Author

Sittichai is a Web Developer and Web Technology Instructor for over 10 yrs. He is also a webmaster of dwthai.com and author jQuery with Dreamweaver (2010). DwThai.Com is a website for web developer using Adobe Dreamweaver.

Contact with him :

บทความอื่นที่คุณอาจสนใจ