ฟอร์ม (FORM) ทำหน้าที่ในการติดต่อสื่อสารหรือโต้ตอบระหว่างกับผู้ใช้เว็บไซต์ในลักษณะการรับส่งข้อมูล เมื่อ
ผู้ใช้กรอกข้อมูลในฟอร์มและคลิกปุ่มส่งข้อมูล ข้อมูลเหล่านั้นก็จะถูกส่งไปประมวลผลที่เซิร์ฟเวอร์ ฟอร์มจะประกอบไปด้วยอ็อบเจ็คต์ต่างๆ ซึ่งแต่ละอ็อบเจ็คต์ก็มีลักษณะการโต้ตอบกับผู้ใช้แตกต่างกันไป รายละเอียดการทำงานแต่ละอ็อบเจ็คต์จะกล่าวถึงในลำดับต่อไป นอกจากนั้นภายในแท็กฟอร์มยังมีพารามิเตอร์ที่เราสามารถกำหนดค่าเป็นการระบุให้ส่งค่าไปยังไฟล์สคริปต์บนเซิร์ฟเวอร์หรือโปรแกรมอื่นๆ เพื่อทำหน้าที่ประมวลผลข้อมูลที่ถูกส่งมากับฟอร์มได้อีกด้วย
รูปแสดงการทำงานของฟอร์ม
วิธีการทำงานของฟอร์ม
จากรูปด้านบน แสดงวิธีการทำงานของฟอร์มดังนี้
- เริ่มต้นเมื่อผู้ใช้กรอกแบบฟอร์มบนเว็บเพจและคลิกปุ่มส่งข้อมูลมาที่เว็บเซิร์ฟเวอร์
- ข้อมูลจากฟอร์มจะถูกประมวลผลที่ไฟล์ PHP, ASP หรือไฟล์ CGI อื่นๆบนเว็บเซิร์ฟเวอร์
- เมื่อประมวลผลเสร็จแล้ว ผลลัพธ์จะถูกส่งกลับไปให้ผู้ใช้ในรูปแบบเอกสาร HTML เพื่อให้เว็บเบราเซอร์แสดงผล
|
ขั้นตอนการสร้างฟอร์ม:
- เปิดโปรแกรม Dreamweaver คลิกเมนู File > New จะปรากฏไดอะล็อก New Document ขึ้นมา ให้คลิกแท็บ General เลือก Dynamic Page > PHP หลังจากนั้นคลิกปุ่ม Create บันทึกเป็นไฟล์ form.php
- ที่หน้าจอของเว็บเพจ ให้คลิกเพื่อวางเคอร์เซอร์ในตำแหน่งที่ต้องการสร้างฟอร์ม หลังจากนั้นคลิกที่เมนู
Insert > Form > Form ฟอร์มจะถูกแทรกลงในเว็บเพจ หากอยู่ใน Design View จะเห็นขอบเขตของฟอร์มแสดงเป็นเส้นประสีแดง (หากไม่มีเส้นประสีแสดงขึ้นมา ให้คลิกที่เมนู View > Visual Aids > Invisible Elements)
รูปแสดงเว็บเพจที่แทรกฟอร์ม
- คลิกวางตำแหน่งเคอร์เซอร์ลงภายในขอบเขตของฟอร์ม หลังจากนั้นให้คลิกเลือกแท็ก <form> จาก Tag Selector บริเวณขอบล่างซ้ายของเว็บเพจ เมื่อปรากฏไดอะล็อก Properties ช่อง Form Name ให้กำหนดชื่อของฟอร์ม เท่ากับ fmProcess ชื่อของฟอร์มนี้จะถูกใช้เพื่ออ้างอิงในสคริปต์ PHP
รูปแสดง Property ของฟอร์ม
- ไดอะล็อก Properties ช่อง Action ให้กำหนดชื่อไฟล์ หรือ URL ของสคริปต์ที่จะใช้ในการประมวลผลฟอร์ม เท่ากับ formprocess.php (หากต้องการระบุเป็น URL ให้พิมพ์เป็น http://localhost/phpweb/formprocess.php)
- ไดอะล็อก Properties ช่อง Method ให้เลือกรูปแบบการส่งข้อมูลจากฟอร์มไปที่เว็บเซิร์ฟเวอร์ ซึ่งมีให้เลือก 3 รูปแบบ คือ
การทำงานของ METHOD:
- POST ส่งข้อมูลโดยส่งข้อมูลส่งไปกับ HTTP Request
- GET ส่งข้อมูลโดยการแปะค่าเป็น URL Parameter (Query String) ไปกับ URL (ข้อมูลที่ส่งจะแสดงอยู่บน URL ของเว็บเบราเซอร์)
- DEFAULT ส่งข้อมูลโดยขึ้นอยู่กับค่า default ของเว็บเบราเซอร์ โดยปกติจะเป็นแบบ GET
- POST ส่งข้อมูลโดยส่งข้อมูลส่งไปกับ HTTP Request
NOTE: วิธีการส่งข้อมูลแบบ GET ไม่ควรใช้กับฟอร์มที่มีการส่งข้อมูลจำนวนมาก รวมทั้งไม่ควรใช้ในการส่งข้อมูลที่เป็นความลับ เช่น username, password หรือเลขที่บัตรเครดิต เป็นต้น เนื่องจากวิธีการส่งแบบ GET นี้ ข้อมูลที่เราส่งจะถูกแสดงบน URL เช่น http://localhost/phpweb/detail.php?empid=01020489 |
- ไดอะล็อก Properties ช่อง Enctype ให้ระบุชนิดของการเข้ารหัสข้อมูล โดยค่า default ของ Enctype จะเป็น application/x-www-form-urlencode ซึ่งจะถูกใช้ร่วมกับ method แบบ POST หากใช้ฟอร์มในการอัปโหลดไฟล์ ให้เลือก Enctype เป็นแบบ multipart/form-data
- ไดอะล็อก Properties ช่อง Target ให้พิมพ์ชื่อหน้าจอของเว็บเบราเซอร์ที่ต้องการแสดงผลลัพธ์ของฟอร์มหรือเลือกจากรายการที่กำหนดไว้ให้ หากเว็บเบราเซอร์ยังไม่มีชื่อหน้าจอที่ระบุ เว็บเบราเซอร์จะสร้างหน้าจอชื่อที่ระบุขึ้นมาใหม่ ตัวเลือกที่กำหนดไว้ให้ในช่อง Target
การทำงานของ TARGET:
- _blank ผลลัพธ์ของฟอร์มจะแสดงที่หน้าจอเว็บเบราเซอร์ที่สร้างขึ้นมาใหม่
- _parent ผลลัพธ์ของฟอร์มจะแสดงที่หน้าจอหลัก (parent) ของหน้าจอเว็บเบราเซอร์ขณะนั้น
- _self ผลลัพธ์จะแสดงที่หน้าจอเว็บเบราเซอร์เดียวกับฟอร์ม
- _top ผลลัพธ์ของฟอร์มจะแสดงที่หน้าจอหลัก ในกรณีที่หน้าจอเว็บเบราเซอร์แบ่งเป็นหลายเฟรม
- _blank ผลลัพธ์ของฟอร์มจะแสดงที่หน้าจอเว็บเบราเซอร์ที่สร้างขึ้นมาใหม่
- คลิกปุ่ม 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
- เปิดโปรแกรม 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
- ทดสอบการทำงานของฟอร์ม โดยเปิด Dreamweaver ไปที่หน้าจอไฟล์ form.php หลังจากนั้นกดปุ่ม F12 จะปรากฏหน้าจอ Internet Explorer เป็นแบบฟอร์มกรอกข้อมูล ให้กรอกข้อมูล แล้วคลิกปุ่ม "บันทึก" ให้สังเกตผลลัพธ์การทำงานของเว็บเพจ
รูปแสดงการทำงานของไฟล์ form.php
รูปแสดงการทำงานของไฟล์ formprocess.php
- เปลี่ยน METHOD ของฟอร์มในไฟล์ form.php จาก METHOD="POST" เป็น METHOD="GET"
- เปลี่ยนชื่อตัวแปรในไฟล์ formprocess.php จาก $_POST['firstname'] เป็น $_GET['firstname']
และ $_POST['lastname'] เป็น $_GET['lastname']
- ทดสอบการทำงานของฟอร์มใหม่อีกครั้ง ให้สังเกตผลลัพธ์การทำงานของเว็บเพจ
|
อ็อบเจ็คต์ คือส่วนของฟอร์มที่ใช้ในการรับข้อมูลจากผู้ใช้ ก่อนที่จะแทรกอ็อบเจ็คต์ลงบนเว็บเพจ ต้องมีการสร้างหรือแทรกฟอร์มลงในเว็บเพจก่อนเสมอ หากมีการแทรกอ็อบเจ็คต์ลงในส่วนที่ไม่มีฟอร์ม 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 ลักษณะ คือ
- Single Line กำหนดให้แสดงเป็นแบบบรรทัด (Textarea)
- Multi Line กำหนดให้แสดงเป็นแบบหลายบรรทัด
- Password กำหนดให้แสดงแบบรหัสผ่าน
- Single Line กำหนดให้แสดงเป็นแบบบรรทัด (Textarea)
- 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 ลักษณะ คือ
- Submit Form กำหนดให้ใช้สำหรับส่งฟอร์มไปประมวลผล
- Reset Form กำหนดให้ใช้สำหรับยกเลิกการกรอกข้อมูลในฟอร์ม
- None กำหนดให้เป็นปุ่มที่คลิกแล้วไม่ทำงานใดๆ
รูปแสดงการใช้งานอ็อบเจ็คต์ Button
- Submit Form กำหนดให้ใช้สำหรับส่งฟอร์มไปประมวลผล
การใช้งานอ็อบเจ็คต์ 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 ลักษณะ คือ
- Checked กำหนดให้เริ่มต้นโดยให้สถานะเป็นถูกเลือกไว้
- Unchecked กำหนดให้เริ่มต้นโดยสถานะไม่ให้ถูกเลือก
รูปแสดงการใช้งานอ็อบเจ็คต์ Check Box
- Checked กำหนดให้เริ่มต้นโดยให้สถานะเป็นถูกเลือกไว้
การใช้งานอ็อบเจ็คต์ 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 ลักษณะ คือ
- Checked กำหนดให้เริ่มต้นโดยให้สถานะเป็นถูกเลือกไว้
- Unchecked กำหนดให้เริ่มต้นโดยสถานะไม่ให้ถูกเลือก
รูปแสดงการใช้งานอ็อบเจ็คต์ Radio Button
- Checked กำหนดให้เริ่มต้นโดยให้สถานะเป็นถูกเลือกไว้
การใช้งานอ็อบเจ็คต์ 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:
- สร้างฟอร์มสำหรับกรอกข้อมูลพนักงาน บันทึกเป็นไฟล์ htmlform.htm ดังรูปด้านล่าง
Hint:
- ประยุกต์การใช้งานแท็ก <TABLE> <IMG> <A> และ <FORM>
- Backgroung Image ใช้ไฟล์ PHPWEB\images\bkg_insert.gif
- Title ใช้ไฟล์ PHPWEB\images\title_insert.gif
- ประยุกต์การใช้งานแท็ก <TABLE> <IMG> <A> และ <FORM>
No comments:
Post a Comment