About DwThai.Com 00

DwThai.Com

Tip and Trick Dreamweaver

ก่อตั้งเมื่อปีพุทธศักราช ๒๕๔๖

Go to Post-iT Sign Guestbook

ค้นหาข้อมูลใน DwThai.Com

การสร้าง Form และ Input สำหรับกรอกข้อมูล [Article ID : 118]

เรื่อง : การสร้าง 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 ดังรูป

3. โปรแกรมจะทำการสร้างฟอร์มให้เรา โดยที่หน้าเว็บเพจที่แสดงกับ Dreamweaver จะแสดงเป็นเส้นประสีแดง ดังรูป

4. กำหนดค่าที่สำคัญให้แก่ฟอร์ม โดยไปที่ Properties Panel ดังรูป

จากรูปมีการกำหนดค่า ดังนี้
ID : form1 *หรือชื่ออื่นตามต้องการ
Action : save-data.php *ชือ่ไฟล์ที่จะส่งข้อมูลไปประมวลผลเมื่อกดปุ่ม Submit หรือปุ่มส่งข้อมูล
Method: POST *วิธีการส่งข้อมูลซึ่งมีให้เลือก GET หรือ POST

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

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

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

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

จากรูปเป็นการเลือกไปที่อินพุตสำหรับกรอกข้อมูลแบบ Text

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

8. ทำการกำหนดค่าให้อินพุตที่ได้ โดยสามารถกำหนดได้ที่ Properties Panel ดังรูป

ในรูปข้างต้น มีการกำหนดคุณสมบัติให้แก่อินพุต ดังนี้
Name : searching *ชื่อของอินพุต สำคัญมากไว้ใช้อ้างอิงในการพัฒนาโปรแกรม
Size : 20 *ขนาดความกว้างของช่องกรอกข้อมูล
Max Length : 40 *จำนวนตัวอักษรสูงสุดที่ผู้ใช้จะสามารถกรอกได้

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

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

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

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

11. โปรแกรมจะทำการสร้างปุ่ม Submit ให้เรากับฟอร์ม ดังรูป

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

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

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

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

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

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

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

About the Author

Mr.Sittichai Raksasuk

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 : dwthai@gmail.com