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

ในการสร้างฟอร์มและอินพุตนั้น มีขั้นตอนอยู่ 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 ให้เรากับฟอร์ม ดังรูป