เรื่อง : การสร้าง Form และ Input เพื่อให้ผู้ใช้เว็บกรอกข้อมูลโดยใช้ Dreamweaver
Form หรือ ฟอร์ม คือ กลุ่มของ Input (อินพุต) ที่ใช้สำหรับกรอกข้อมูลหน้าเว็บ ซึ่งใน 1 ฟอร์มสามารถมีอินพุตได้มากกว่า 1 อินพุตข้อมูล แต่ละข้อมูลของอินพุตจะถูกส่งไปประมวลผล โดยการ Submit หรือการส่งข้อมูลในครั้งเดียวกัน และใน 1 หน้าเว็บเพจ สามารถมีฟอร์มได้มากกว่า 1 ฟอร์ม
...ข้างต้นคือความหมายโดยรวมของ "ฟอร์ม" ครับ หากท่านใดยังไม่เข้าใจ
ลองดูที่รูปด้านล่างประกอบ
จากรูปจะพบว่าใน 1 ฟอร์มจะประกอบด้วยอินพุตสำหรับกรอกข้อมูลมากมาย ตามที่ได้อธิบายไป และเราจะพบว่ามีปุ่มกดเพื่อบันทึก หรือส่งข้อมูล (Submit) เพียง 1 ปุ่มเท่านั้น นั้นก็คือ...ในหนึ่งฟอร์ม ไม่ว่าจะมีจำนวนอินพุตมากเท่าไหร่ก็ตาม แต่การส่งข้อมูลไปเพื่อประมวลผลหรือการ Submit จะกระทำในครั้งเดียวต่อหนึ่งฟอร์มเท่านั้น
วิธีการสร้างฟอร์มและอินพุตด้วย Dreamweaver
ในการสร้างฟอร์มและอินพุตนั้น
มีขั้นตอนอยู่ 3 ขั้นตอน ที่เราควรทราบ ดังนี้
1. สร้างฟอร์ม (Form)
2. สร้างอินพุต (Input) ต่างๆ ลงไปที่ฟอร์ม หรือให้อยู่ภายในฟอร์ม
3. สร้างปุ่ม Submit หรือปุ่มส่งข้อมูลไปประมวลผล
ซึ่งทั้ง 3 ขั้นตอนนี้ให้กระทำโดยลำดับ ดังนี้
1. สร้างฟอร์ม (Form) ให้เสร็จเสียก่อน
ขั้นตอนแรกต้องสร้างฟอร์มขึ้นมาเสียก่อน ดังนี้
1. นำ Cursor วางยังตำแหน่งที่ต้องการแสดงฟอร์ม
2. จากนั้นที่ Insert เลือกที่ Form และเลือกไปที่ไอคอน
Form ดังรูป
ID : form1 *หรือชื่ออื่นตามต้องการ
Action : save-data.php *ชือ่ไฟล์ที่จะส่งข้อมูลไปประมวลผลเมื่อกดปุ่ม Submit หรือปุ่มส่งข้อมูล
Method: POST *วิธีการส่งข้อมูลซึ่งมีให้เลือก GET หรือ POST
เป็นอันเสร็จสิ้นในส่วนของการสร้างฟอร์ม
2. สร้างอินพุต (Input) ลงไปที่ฟอร์ม
เมื่อได้สร้างฟอร์มเสร็จสิ้นแล้ว จากนั้นจึงทำการสร้างอินพุตให้แก่ฟอร์มต่อไป ดังนี้
5. ที่ในระหว่างเส้นประสีแดง (หรือฟอร์ม) นำ Cursor ไปวาง
6. จากนั้นไปที่
Insert->Form เลือกไปที่รูปแบบอินพุตที่เราต้องการ ดังรูป
7. โปรแกรมจะสร้างอินพุตลงไปที่ฟอร์มให้เรา ดังรูป
Name : searching *ชื่อของอินพุต สำคัญมากไว้ใช้อ้างอิงในการพัฒนาโปรแกรม
Size : 20 *ขนาดความกว้างของช่องกรอกข้อมูล
Max Length : 40 *จำนวนตัวอักษรสูงสุดที่ผู้ใช้จะสามารถกรอกได้
ข้างต้นคือขั้นตอนการสร้างอินพุตที่สำคัญ ซึ่งคุณสามารถสร้างอินพุตอื่น ๆ ได้โดยลักษณะเดียวกับที่อธิบายมา ดังในรูปด้านล่างนี้ มีการเพิ่มอินพุตอื่นลงไปที่ฟอร์มอีก 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 :