Dw ch06 form_and_php

บทที่ 6
การใช้งานฟอร์มกับ PHP
ฟอร์มทำหน้าที่ในการติดต่อสื่อสารหรือโต้ตอบกับผู้ใช้เว็บไซต์ในลักษณะการรับส่งข้อมูล เมื่อ
ผู้ใช้กรอกข้อมูลในฟอร์มและคลิกปุ่มส่งข้อมูล ข้อมูลเหล่านั้นก็จะถูกส่งไปประมวลผลที่เซิร์ฟเวอร์ ฟอร์มจะประกอบไป
ด้วยอ็อบเจ็คต์ต่างๆ ซึ่งแต่ละอ็อบเจ็คต์ก็มีลักษณะการโต้ตอบกับผู้ใช้แตกต่างกันไป รายละเอียดการทำงานแต่ละอ็อบเจ็คต์จะ
กล่าวถึงในลำดับต่อไป นอกจากนั้นภายในแท็กฟอร์มยังมีพารามิเตอร์ที่เราสามารถกำหนดค่าเป็นการระบุให้ส่งค่าไปยังไฟล์
สคริปต์บนเซิร์ฟเวอร์หรือโปรแกรมอื่นๆ เพื่อทำหน้าที่ประมวลผลข้อมูลที่ถูกส่งมากับฟอร์มได้อีกด้วย
รูปแสดงการทำงานของฟอร์ม
วิธีการทำงานของฟอร์ม
จากรูปด้านบน แสดงวิธีการทำงานของฟอร์มดังนี้
1) เริ่มต้นเมื่อผู้ใช้กรอกแบบฟอร์มบนเว็บเพจและคลิกปุ่มส่งข้อมูลมาที่เว็บเซิร์ฟเวอร์
2) ข้อมูลจากฟอร์มจะถูกประมวลผลที่ไฟล์ PHP, ASP หรือไฟล์ CGI อื่นๆบนเว็บเซิร์ฟเวอร์
3) เมื่อประมวลผลเสร็จแล้ว ผลลัพธ์จะถูกส่งกลับไปให้ผู้ใช้ในรูปแบบเอกสาร HTML เพื่อให้เว็บเบราเซอร์แสดงผล
dulyawat@hotmail.com การใช้งานฟอร์มกับ PHP 33

การสร้างและใช้งานฟอร์มกับ PHP
ขั้นตอนการสร้างฟอร์ม:
1. เปิดโปรแกรม Dreamweaver คลิกเมนู File > New จะปรากฏไดอะล็อก New Document ขึ้นมา ให้คลิกแท็บ General
เลือก Dynamic Page > PHP หลังจากนั้นคลิกปุ่ม Create บันทึกเป็นไฟล์ form.php
2. ที่หน้าจอของเว็บเพจ ให้คลิกเพื่อวางเคอร์เซอร์ในตำแหน่งที่ต้องการสร้างฟอร์ม หลังจากนั้นคลิกที่เมนู
Insert > Form > Form ฟอร์มจะถูกแทรกลงในเว็บเพจ หากอยู่ใน Design View จะเห็นขอบเขตของฟอร์มแสดงเป็น
เส้นประสีแดง (หากไม่มีเส้นประสีแสดงขึ้นมา ให้คลิกที่เมนู View > Visual Aids > Invisible Elements)
รูปแสดงเว็บเพจที่แทรกฟอร์ม
3. คลิกวางตำแหน่งเคอร์เซอร์ลงภายในขอบเขตของฟอร์ม หลังจากนั้นให้คลิกเลือกแท็ก <form> จาก Tag Selector บริเวณ
ขอบล่างซ้ายของเว็บเพจ เมื่อปรากฏไดอะล็อก Properties ช่อง Form Name ให้กำหนดชื่อของฟอร์ม เท่ากับ fmProcess
ชื่อของฟอร์มนี้จะถูกใช้เพื่ออ้างอิงในสคริปต์ PHP
รูปแสดง Property ของฟอร์ม
4. ไดอะล็อก Properties ช่อง Action ให้กำหนดชื่อไฟล์ หรือ URL ของสคริปต์ที่จะใช้ในการประมวลผลฟอร์ม เท่ากับ
formprocess.php (หากต้องการระบุเป็น URL ให้พิมพ์เป็น http://localhost/phpweb/formprocess.php)

5. ไดอะล็อก Properties ช่อง Method ให้เลือกรูปแบบการส่งข้อมูลจากฟอร์มไปที่เว็บเซิร์ฟเวอร์ ซึ่งมีให้เลือก 3 รูปแบบ คือ
การทำงานของ METHOD:
•
POST ส่งข้อมูลโดยส่งข้อมูลส่งไปกับ HTTP Request
•
GET ส่งข้อมูลโดยการแปะค่าเป็น URL Parameter (Query String) ไปกับ URL (ข้อมูลที่ส่งจะแสดงอยู่
บน URL ของเว็บเบราเซอร์)
•
DEFAULT ส่งข้อมูลโดยขึ้นอยู่กับค่า default ของเว็บเบราเซอร์ โดยปกติจะเป็นแบบ GET
NOTE: วิธีการส่งข้อมูลแบบ GET ไม่ควรใช้กับฟอร์มที่มีการส่งข้อมูลจำนวนมาก รวมทั้งไม่ควรใช้ในการส่งข้อมูลที่
เป็นความลับ เช่น username, password หรือเลขที่บัตรเครดิต เป็นต้น เนื่องจากวิธีการส่งแบบ GET นี้ ข้อมูลที่เราส่งจะ
ถูกแสดงบน URL เช่น http://localhost/phpweb/detail.php?empid=01020489
6. ไดอะล็อก Properties ช่อง Enctype ให้ระบุชนิดของการเข้ารหัสข้อมูล โดยค่า default ของ Enctype จะเป็น
application/x-www-form-urlencode ซึ่งจะถูกใช้ร่วมกับ method แบบ POST หากใช้ฟอร์มในการอัปโหลดไฟล์ ให้เลือก
Enctype เป็นแบบ multipart/form-data
7. ไดอะล็อก Properties ช่อง Target ให้พิมพ์ชื่อหน้าจอของเว็บเบราเซอร์ที่ต้องการแสดงผลลัพธ์ของฟอร์มหรือเลือกจาก
รายการที่กำหนดไว้ให้ หากเว็บเบราเซอร์ยังไม่มีชื่อหน้าจอที่ระบุ เว็บเบราเซอร์จะสร้างหน้าจอชื่อที่ระบุขึ้นมาใหม่
ตัวเลือกที่กำหนดไว้ให้ในช่อง Target
การทำงานของ TARGET:
•
_blank ผลลัพธ์ของฟอร์มจะแสดงที่หน้าจอเว็บเบราเซอร์ที่สร้างขึ้นมาใหม่
•
_parent ผลลัพธ์ของฟอร์มจะแสดงที่หน้าจอหลัก (parent) ของหน้าจอเว็บเบราเซอร์ขณะนั้น
•
_self ผลลัพธ์จะแสดงที่หน้าจอเว็บเบราเซอร์เดียวกับฟอร์ม
•
_top ผลลัพธ์ของฟอร์มจะแสดงที่หน้าจอหลัก ในกรณีที่หน้าจอเว็บเบราเซอร์แบ่งเป็นหลายเฟรม
8. คลิกปุ่ม Code View เพื่อเขียนโค้ด HTML ดังรูปด้านล่าง หลังจากนั้นบันทึกไฟล์ form.php
<html>
<body>
<form action="formprocess.php" method="POST" name="fmProcess">
ชื่อ: <input name="firstname" type="text" size="32" maxlength="30"> <br>
นามสกุล: <input name="lastname" type="text" size="32" maxlength="30"> <br>
<input name="btnSubmit" type="submit" value="บันทึก">
<input name="btnReset" type="reset" value="ยกเลิก">
</form>
</body>
</html>
รูปแสดงโค้ดไฟล์ form.php

9. เปิดโปรแกรม Dreamweaver คลิกเมนู File > New จะปรากฏไดอะล็อก New Document ขึ้นมา ให้คลิกแท็บ General
เลือก Dynamic Page > PHP คลิกปุ่ม Create หลังจากนั้นให้เพื่อเขียนโค้ด PHP ดังรูปด้านล่าง บันทึกเป็นไฟล์
formprocess.php
<html>
<body>
<?php
echo "ชื่อ: " . $_POST['firstname'] . "<br>";
echo "นามสกุล: " . $_POST['lastname'] . "<br>";
?>
</body>
</html>
รูปแสดงโค้ดไฟล์ formprocess.php
10. ทดสอบการทำงานของฟอร์ม โดยเปิด Dreamweaver ไปที่หน้าจอไฟล์ form.php หลังจากนั้นกดปุ่ม F12 จะปรากฏ
หน้าจอ Internet Explorer เป็นแบบฟอร์มกรอกข้อมูล ให้กรอกข้อมูล แล้วคลิกปุ่ม "บันทึก" ให้สังเกตผลลัพธ์การทำงาน
ของเว็บเพจ
รูปแสดงการทำงานของไฟล์ form.php
รูปแสดงการทำงานของไฟล์ formprocess.php
11. เปลี่ยน METHOD ของฟอร์มในไฟล์ form.php จาก METHOD="POST" เป็น METHOD="GET"
12. เปลี่ยนชื่อตัวแปรในไฟล์ formprocess.php จาก $_POST['firstname’] เป็น $_GET['firstname']
และ $_POST['lastname'] เป็น $_GET['lastname']
13. ทดสอบการทำงานของฟอร์มใหม่อีกครั้ง ให้สังเกตผลลัพธ์การทำงานของเว็บเพจ

อ็อบเจ็คต์ คือส่วนของฟอร์มที่ใช้ในการรับข้อมูลจากผู้ใช้ ก่อนที่จะแทรกอ็อบเจ็คต์ลงบนเว็บเพจ ต้องมีการสร้าง
หรือแทรกฟอร์มลงในเว็บเพจก่อนเสมอ หากมีการแทรกอ็อบเจ็คต์ลงในส่วนที่ไม่มีฟอร์ม Dreamweaver จะถามโดย
ปรากฏไดอะล็อก “Add form tags?” ให้เลือก Yes เพื่อให้ Dreamweaver สร้างแท็กฟอร์มสำหรับอ็อบเจ็คต์นั้น
รูปแสดงฟอร์มและอ็อบเจ็คต์บน Insert Bar
การใช้งานอ็อบเจ็คต์ Text Field
อ็อบเจ็คต์ชนิด Text Field จะมีหน้าที่ในการรับค่าข้อมูล เพื่อใช้ในการจัดเก็บข้อมูลหรือส่งค่าบางอย่างที่ต้องการ
ค้นหา เช่น ใช้ในการค้นหาข้อมูล (Search Engine) เป็นต้น
วิธีการสร้าง Text Field ทำได้โดยการคลิกเมนู Insert > Form > Text Field เสร็จแล้วให้กำหนดคุณสมบัติของ
Text Field โดยให้คลิกเลือกที่ Text Field ในเว็บเพจ หลังจากนั้นให้ไปที่เมนู Window > Properties จะปรากฏคุณสมบัติของ
Text Field แสดงในไดอะล็อก Properties
รูปแสดง Property ของอ็อบเจ็คต์ Text Field แบบ Single line
คุณสมบัติของอ็อบเจ็คต์ Text Field:
•
TextField กำหนดชื่อของอ็อบเจ็คต์ Text Field
•
Char Width กำหนดความกว้างของ Text Field
•
Max Chars กำหนดจำนวนตัวอักษรสูงสุดที่กรอกข้อมูลได้ของ Text Field
•
Type กำหนดชนิดของ Text Field มี 3 ลักษณะ คือ
การใช้งานอ็อบเจ็คต์ของฟอร์มชนิดต่างๆ

o
Single Line กำหนดให้แสดงเป็นแบบบรรทัด (Textarea)
o
Multi Line กำหนดให้แสดงเป็นแบบหลายบรรทัด
o
Password กำหนดให้แสดงแบบรหัสผ่าน
•
Init Val กำหนดค่าเริ่มต้น
รูปแสดงการใช้งานอ็อบเจ็คต์ Text Field
การใช้งานอ็อบเจ็คต์ Textarea
อ็อบเจ็คต์ชนิด Textarea จะมีหน้าที่ในการรับค่าข้อมูลที่มีขนาดใหญ่ เช่น ที่อยู่ เป็นต้น
วิธีการสร้าง Text Field ทำได้โดยการคลิกเมนู Insert > Form > Textarea เสร็จแล้วให้กำหนดคุณสมบัติของ
Textarea โดยให้คลิกเลือกที่ Textarea ในเว็บเพจ หลังจากนั้นให้ไปที่เมนู Window > Properties จะปรากฏคุณสมบัติของ
Textarea แสดงในไดอะล็อก Properties
รูปแสดง Property ของอ็อบเจ็คต์ Textarea
คุณสมบัติของอ็อบเจ็คต์ Textarea:
•
TextField กำหนดชื่อของอ็อบเจ็คต์ Textarea
•
Char Width กำหนดความกว้างของ Textarea
•
Max Chars กำหนดจำนวนตัวอักษรสูงสุดที่กรอกข้อมูลได้ของ Textarea
•
Type กำหนดชนิดของ Textarea คือ Multi Line
•
Init Val กำหนดค่าเริ่มต้น

รูปแสดงการใช้งานอ็อบเจ็คต์ Textarea
การใช้งานอ็อบเจ็คต์ Button
อ็อบเจ็คต์ชนิด Button มักถูกนำมาใช้เพื่อทำหน้าที่ในการยืนยันการเพิ่มข้อมูล แก้ไขข้อมูล การลบข้อมูล หรือยกเลิก
การใช้งาน
วิธีการสร้าง Button ทำได้โดยการคลิกเมนู Insert > Form > Button เสร็จแล้วให้กำหนดคุณสมบัติของ Button
โดยให้คลิกเลือกที่ Button ในเว็บเพจ หลังจากนั้นให้ไปที่เมนู Window > Properties จะปรากฏคุณสมบัติของ Button แสดง
ในไดอะล็อก Properties
รูปแสดง Property ของอ็อบเจ็คต์ Button
คุณสมบัติของอ็อบเจ็คต์ Button:
•
Button name กำหนดชื่อของอ็อบเจ็คต์ Button
•
Label กำหนดข้อความที่จะแสดงบนปุ่ม Button
•
Action กำหนดชนิดของ Action มี 3 ลักษณะ คือ
o
Submit Form กำหนดให้ใช้สำหรับส่งฟอร์มไปประมวลผล
o
Reset Form กำหนดให้ใช้สำหรับยกเลิกการกรอกข้อมูลในฟอร์ม
o
None กำหนดให้เป็นปุ่มที่คลิกแล้วไม่ทำงานใดๆ

รูปแสดงการใช้งานอ็อบเจ็คต์ Button
การใช้งานอ็อบเจ็คต์ Check Box
อ็อบเจ็คต์ชนิด Check Box ทำหน้าที่เพื่อแสดงตัวเลือกให้ผู้ใช้ได้เลือกตัวเลือกที่กำหนดให้ ซึ่งสามารถเลือกได้
มากกว่า 1 ตัวเลือก
วิธีการสร้าง Check Box ทำได้โดยการคลิกเมนู Insert > Form > Check Box เสร็จแล้วให้กำหนดคุณสมบัติของ
Check Box โดยให้คลิกเลือกที่ Check Box ในเว็บเพจ หลังจากนั้นให้ไปที่เมนู Window > Properties จะปรากฏคุณสมบัติ
ของ Check Box แสดงในไดอะล็อก Properties
รูปแสดง Property ของอ็อบเจ็คต์ Check Box
คุณสมบัติของอ็อบเจ็คต์ Check Box:
•
CheckBox กำหนดชื่อของอ็อบเจ็คต์ Check Box
•
Checked Value กำหนดค่าให้ Check Box
•
Initial State กำหนดสถานะเริ่มต้นเมื่อแสดงบนเว็บเพจ มี 2 ลักษณะ คือ
o
Checked กำหนดให้เริ่มต้นโดยให้สถานะเป็นถูกเลือกไว้
o
Unchecked กำหนดให้เริ่มต้นโดยสถานะไม่ให้ถูกเลือก
รูปแสดงการใช้งานอ็อบเจ็คต์ Check Box

การใช้งานอ็อบเจ็คต์ Radio Button
อ็อบเจ็คต์ชนิด Radio Button ทำหน้าที่เพื่อแสดงตัวเลือกให้ผู้ใช้ได้เลือกตัวเลือกที่กำหนดให้ ซึ่งสามารถเลือกได้เพียง
1 ตัวเลือกเท่านั้น เช่น การเลือกระบุเพศ ชาย หรือ หญิง จะเป็นการเลือกเพศใดเพศหนึ่งเพียงเพศเดียวเท่านั้น
วิธีการสร้าง Radio Button ทำได้โดยการคลิกเมนู Insert > Form > Radio Button เสร็จแล้วให้กำหนดคุณสมบัติ
ของ Radio Button โดยให้คลิกเลือกที่ Radio Button ในเว็บเพจ หลังจากนั้นให้ไปที่เมนู Window > Properties จะปรากฏ
คุณสมบัติของ Radio Button แสดงในไดอะล็อก Properties
รูปแสดง Property ของอ็อบเจ็คต์ Radio button
คุณสมบัติของอ็อบเจ็คต์ Radio Button:
•
RadioButton กำหนดชื่อของอ็อบเจ็คต์ Radio Button หากเป็นการเลือกอย่างใดอย่างหนึ่ง จากตัวเลือกตั้งแต่ 2
ตัวขึ้นไป จะต้องกำหนดชื่อของ Radio Button ทุกตัวให้ชื่อเหมือนกัน มิฉะนั้น การทำงานของ Radio Button จะไม่
ถูกต้อง
•
Checked Value กำหนดค่าให้ Radio Button
•
Initial State กำหนดสถานะเริ่มต้นเมื่อแสดงบนเว็บเพจ มี 2 ลักษณะ คือ
o
Checked กำหนดให้เริ่มต้นโดยให้สถานะเป็นถูกเลือกไว้
o
Unchecked กำหนดให้เริ่มต้นโดยสถานะไม่ให้ถูกเลือก
รูปแสดงการใช้งานอ็อบเจ็คต์ Radio Button
การใช้งานอ็อบเจ็คต์ List/Menu
อ็อบเจ็คต์ชนิด List/Menu ทำหน้าที่เพื่อกำหนดค่าโดยที่ใช้ไม่ต้องพิมพ์ตัวเลือกที่ต้องการลงไป เพียงแค่คลิกเลือก
รายการต่างๆ ที่ไดกำหนดไว้ให้แล้วเท่านั้น สามารถเลือกได้เพียง 1 ตัวเท่านั้น
วิธีการสร้าง List/Menu ทำได้โดยการคลิกเมนู Insert > Form > List/Menu เสร็จแล้วให้กำหนดคุณสมบัติของ
List/Menu โดยให้คลิกเลือกที่ List/Menu ในเว็บเพจ หลังจากนั้นให้ไปที่เมนู Window > Properties จะปรากฏคุณสมบัติ
ของ List/Menu แสดงในไดอะล็อก Properties

รูปแสดงการกำหนด Property ของอ็อบเจ็คต์ List/Menu
คุณสมบัติของอ็อบเจ็คต์ List/Menu:
•
List/Menu กำหนดชื่อของอ็อบเจ็คต์ List/Menu
•
Type เลือกการทำงานเป็นแบบ Menu หรือ List
•
Initially Selected แสดงค่าตัวเลือกที่กำหนดมาจาก List Values
รูปแสดงการใช้งานอ็อบเจ็คต์ List/Menu
การใช้งานอ็อบเจ็คต์ File Field
อ็อบเจ็คต์ชนิด File Field นี้ ทำหน้าที่ในการแสดงรายชื่อไฟล์ต่างๆ เพื่อให้ผู้ใช้เว็บไซต์สามารถเลือกไฟล์เหล่านั้น
ขึ้นมาใช้งาน เช่น การอัปโหลดไฟล์ เป็นต้น
วิธีการสร้าง File Field ทำได้โดยการคลิกเมนู Insert > Form > File Field เสร็จแล้วให้กำหนดคุณสมบัติของ File
Field โดยให้คลิกเลือกที่ File Field ในเว็บเพจ หลังจากนั้นให้ไปที่เมนู Window > Properties จะปรากฏคุณสมบัติของ File
Field แสดงในไดอะล็อก Properties
รูปแสดง Property ของอ็อบเจ็คต์ File Field

คุณสมบัติของอ็อบเจ็คต์ File Field:
•
FileField กำหนดชื่อของอ็อบเจ็คต์ File Field
•
Char Width กำหนดความกว้างของ File Field
•
Max Chars กำหนดจำนวนตัวอักษรสูงสุด
รูปแสดงการใช้งานอ็อบเจ็คต์ File Field
การใช้งานอ็อบเจ็คต์ Hidden Field
อ็อบเจ็คต์ชนิด Hidden Field นี้ จะทำงานในลักษณะล่องหน กล่าวคือ มีจุดประสงค์เพื่อใช้ในการประมวลผลข้อมูล
ที่ได้รับจากการใช้งานฟอร์มต่างๆ ซึ่งฟิลด์แบบ Hidden Field นี้ จะไม่มีการติดต่อสื่อสารกับผู้ใช้งานฟอร์ม แต่อย่างใด รวมทั้ง
ไม่มีการแสดงผลบนหน้าเว็บเพจด้วย
วิธีการสร้าง Hidden Field ทำได้โดยการคลิกเมนู Insert > Form > Hidden Field เสร็จแล้วให้กำหนดคุณสมบัติ
ของ Hidden Field โดยให้คลิกเลือกที่ Hidden Field ในเว็บเพจ หลังจากนั้นให้ไปที่เมนู Window > Properties จะปรากฏ
คุณสมบัติของ Hidden Field แสดงในไดอะล็อก Hidden Field
รูปแสดง Property ของอ็อบเจ็คต์ Hidden Field
คุณสมบัติของอ็อบเจ็คต์ Hidden Field:
•
HiddenField กำหนดชื่อของอ็อบเจ็คต์ Hidden Field
•
Value กำหนดค่าเริ่มต้นสำหรับ Hidden Field

รูปแสดงการใช้งานอ็อบเจ็คต์ Hidden Field
การใช้งานอ็อบเจ็คต์ Image Field
อ็อบเจ็คต์ชนิด Image Field นี้ เราสามารถใส่รูปลงในฟอร์มเพื่อทำให้เว็บเพจนั้นดูมีสีสันดูสวยงามขึ้นยิ่งขึ้น หรืออาจ
ใช้ประโยชน์ในการใช้แทนปุ่ม Button ก็ได้
วิธีการสร้าง Image Field ทำได้โดยการคลิกเมนู Insert > Form > Image Field เสร็จแล้วให้กำหนดคุณสมบัติของ
List/Menu โดยให้คลิกเลือกที่ Image Field ในเว็บเพจ หลังจากนั้นให้ไปที่เมนู Window > Properties จะปรากฏคุณสมบัติ
ของ Image Field แสดงในไดอะล็อก Image Field
รูปแสดง Property ของอ็อบเจ็คต์ Image Field
คุณสมบัติของอ็อบเจ็คต์ Image Field:
•
ImageField กำหนดชื่อของอ็อบเจ็คต์ Image Field
•
W กำหนดค่าความกว้างของ Image Field ที่แสดง
•
H กำหนดค่าความสูงของ Image Field ที่แสดง
•
Src ชื่อไฟล์รูปภาพของ Image Field ที่แสดง
•
Alt กำหนดข้อควาที่จะใช้แสดงแทน ในกรณีที่ไม่พบไฟล์รูปภาพ
•
Align กำหนดตำแหน่งการแสดง Image Field
รูปแสดงการใช้งานอ็อบเจ็คต์ Image Field

Exercise:
1. สร้างฟอร์มสำหรับกรอกข้อมูลพนักงาน บันทึกเป็นไฟล์ htmlform.htm ดังรูปด้านล่าง
Hint:
- ประยุกต์การใช้งานแท็ก <TABLE> <IMG> <A> และ <FORM>
-
Backgroung Image ใช้ไฟล์ PHPWEBimagesbkg_insert.gif
-
Title ใช้ไฟล์ PHPWEBimagestitle_insert.gif
firstname
Document Title
Imagestitle_insert.gif
extension
phone
deptid
startdate
birthdate
lastname
photo
email
notes

Dw ch06 form_and_php

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

Viewers also liked

Viewers also liked (20)

Similar to Dw ch06 form_and_php

Similar to Dw ch06 form_and_php (20)

More from Webidea Petchtharat

More from Webidea Petchtharat (10)

Dw ch06 form_and_php