ผมเชื่อว่าต้องมีคนเคยสงสัยเหมือนผมแน่ๆเลย ว่าแบบ form หน้าเว็บนั้น ทำงานอย่างไร เราจะทำเองได้หรือไม่ ยากหรือเปล่า.... คำตอบก็คือ ทำเองได้ง่าย ไม่ยาก วันนี้ก็จะมาบอกวิธีการสร้าง และการใช้งานกันแบบละเอียดเลยครับ

ก่อนอื่นที่จำเป็นจะต้องเข้าใจก่อนอื่นใดเลย นั่นก็คือ แบบฟอร์มนั้น จำเป็นจะต้องมีสองส่วนเสมอ คือส่วนรับผลการinput ข้อมูล หรือหน้าที่เรากรอกข้อความลงไปนั่นล่ะครับ และอีกส่วนก็คือการรับข้อมูลจากหน้าที่กรอก เอาไปใช้ประโยชน์ เช่น อาจจะบันทึกลงฐานข้อมูล เอามาประมวลผลเพื่อแสดงค่า ฯลฯ ตามแต่คนเขียนโค้ดแล้วล่ะครับ

ซึ่ง อาจจะเป็นที่น่าตกใจสำหรับมือใหม่เอาสักหน่อย เพราะว่า งานนี้ต้องใช้ภาษา php แล้วล่ะครับ แต่ไม่ต้องตกใจมากไปครับ เพราะว่าเราจะเอามาใช้งานให้ดูแค่คำสั่งพื้นฐานจริงๆ เท่าที่จำเป็นต้องใช้เท่านั้นครับ

เอาล่ะครับ เข้าเรื่องเลยดีกว่า ตอนนี้นะครับ ผมจะมีไฟล์ให้โหลดเพื่อประกอบการศึกษา งานนี้ครับ นั่นก็คือ ไฟล์ start.htm และไฟล์ input.php นะครับ โดยเมื่อโหลดไป เปิดดูด้วย text editor ทั่วๆไปครับ และเนื่องจากโค้ด ต้องมีภาษา php ด้วย ดังนั้น หากเครื่องใหนยังไม่มี appserv ใช้งานก็ขอให้โหลดมาใช้ได้เลย หรือใช้ host free ที่รองรับ ภาษา php ทั่วไปก็ได้ทั้งนั้นครับ

เรามาเริ่มดูที่ form ที่1

เมื่อเปิดหน้าเว็บจะได้ เมื่อเปิดดูโค้ด จะได้

เห็นบรรทัดที่ 2 และ 3 ใหมครับ ว่า มันคือ ช่องการรับข้อมูลตามรูปด้านบน อันที่ 1 และ 2 ตามลำดับครับ โดยที่ผมบอกว่า มีตัวแปรชื่อ name และ surname นั้น ลองสังเกตุ ที่ name=" ของ input แต่ละตัวสิครับ มันจะชื่อเดียวกับตัวแปรนั่นเองครับ

ตัวแปรคืออะไร? ให้เรามองง่ายๆว่า ตัวแปรเหมือนกล่องเปล่า 1 ใบ เราก็เพียงแค่ตั้งชื่อให้กล่องนั้นชื่อว่า name และ surname เท่านั้น ซึ่ง ข้างในกล่องจะมีอะไรนั้นก็ขึ้นอยู่กับ สิ่งที่เรากรอกลงไปนั่นเอง

ต่อมาในบรรทัดที่ 4 นั้น จะเห็นได้ว่า เป็น input เหมือนกัน แต่ว่า มันคือ submit นั่นคือปุ่มกดนั่นเองครับ

และย้อนไปดูที่บรรทัดแรก ให้สังเกตุ 2 อย่างครับ ที่จำเป็นจะต้องสนใจ นั่นคือ method และ action ในที่นี้ post เราไม่ต้องเปลี่ยนอะไร แต่ที่เราจะเปลี่ยนเวลาไปใช้งานอื่นนั่นก็คือ input.php นั่นเองครับ มันคือไฟล์ปลายทางที่เราจะส่งค่าไปให้ ด้วยรูปแบบ post ครับ สำหรับเรื่อง method post และ get นั่นจะว่าอีกทีโดยละเอียดในบทความนี้ครับ

และหากดูดีๆ จะไม่มี input ตัวใด อยู่นอกคำสั่ง form เลยนะครับ อยู่ใน tag เปิด และปิด ของ คำสั่ง form ทั้งหมดครับ

ทีนี้เราก็มารันฝั่งรับข้อมูลบ้างครับ หลังจากที่รัน เราก็จะได้ดังนี้ครับ

เรามาดูโค้ดครับ ทำไมจึงได้เช่นนี้

จากโค้ดนะครับ ไล่ทีละบรรทัดเลย

1.เป็นคำสั่งเปิดให้รันภาษา php (นามสกุลไฟล์ ต้องเป็น .php ด้วยนะครับ)
2.เป็นการรับค่าจากตัวแปร name ในหน้าก่อนที่ส่งมา เข้ามาเก็บในตัวแปรที่ชื่อ name ในหน้านี้ (รับแบบ POST เพราะส่งแบบPOST)
3.เป็นการรับค่าจากตัวแปร surname ในหน้าก่อนที่ส่งมา เข้ามาเก็บในตัวแปรที่ชื่อ surname ในหน้านี้ (รับแบบ POST เพราะส่งแบบPOST)
4.แสดงค่าตัวแปร ที่เก็บใน ตัวแปร name (ผมพิมพ์หน้าก่อนว่า ทดสอบชื่อ) และแสดงผล tag ขึ้นบรรทัดใหม่ของ HTML ธรรมดาครับ (อันนี้ไม่เกี่ยวกับ form แค่จัดรูปแบบเฉยๆ)
5.แสดงค่าตัวแปร ที่เก็บใน ตัวแปร surname (ผมพิมพ์หน้าก่อนว่า ทดสอบนามสกุล)
6.คำสั่งปิด การรันภาษา php

เอาล่ะครับ ก็จบกระบวนการการรับส่งค่าที่หน้าเว็บแล้วนะครับ อันนี้แนะนำกันเป็นแค่เบื้องต้นครับ เพื่อทำความเข้าใจกับมันนั่นเอง สำหรับงานแบบนี้ ผมแนะนำให้ใช้ web editor ครับ เช่น dreamweaver (มีแผ่น CD ของเรามีนะครับ อิๆๆ) จะช่วยในการสร้าง tag สร้างวัตถุได้มากกว่านี้ครับ

สำหรับบางคนที่จะแย้งว่า ฝั่งรับ ไม่ต้องมีบรรทัดที่ 2 กับ3 ก็รันได้ อันนี้ผมก็ไม่เถียงนะครับ แต่!!! บางระบบ จะใช้งานไม่ได้ครับ โดยเฉพาะ ระบบ ที่ register_global = off ... เอาเถอะครับ เดี๋ยวจะงงกันไปใหญ่ เอาเป็นว่าเราเขียนโค้ดที่ใช้ได้กับทุกระบบ ย่อมไม่ดีกว่าเหรอ จริงใหมครับ

Keyword: form, input, output, html, php ,post, get