CHAPTER 12 FORM
Agenda ความหมายของฟอร์ม FORM TAG การรับ-ส่งข้อมูลจากฟอร์ม
Form ฟอร์ม คือหน้าจอที่ใช้เป็นสื่อกลางในการติดต่อระหว่างผู้ใช้เว็บไซต์ กับ เจ้าของเว็บไซต์ โดยผู้ใช้สามารถกรอกข้อมูลผ่านฟอร์มส่งไปยังเซอร์เวอร์ ส่วนการติดต่อกับเซอร์เวอร์นั้นต้องอาศัยโปรแกรมสคริปต์ เช่น PHP, CGI , JAVA, ASP หรือ VB script ฟอร์มหนึ่งๆ ประกอบด้วยฟิลด์(Field)ต่างๆ เช่น text, textarea drop-down box, list box, radio buttons, checkboxes, button เป็นต้น
Form TAG การสร้าง form จะใช้ <form> tag ข้อมูลที่กำหนดในฟอร์มมักจะถูกส่งไปประมวลผลที่ฝั่ง server เมื่อมีการกดปุ่ม Submit ข้อมูล กำหนดวิธีการส่งข้อมูลแบบ POST หรือ GET กำหนด file ที่ต้องการ ส่งข้อมูลไปให้ <form method=“POST” action=“getdetail.php”> First name: <input type="text" name="firstname"> <br> Last name: <input type="text" name="lastname"> <input type=“submit” value=“Submit”> </form>
การส่งข้อมูลจากฟอร์ม การส่งข้อมูลผ่านฟอร์มจะมีสองวิธีคือ GET และ POST การส่งข้อมูลด้วยวิธี GET คือการส่งข้อมูลรวมเข้าไปกับ URL ด้วย ซึ่งจะทำให้ตัวแปรและข้อมูลที่กรอกในแบบฟอร์มแสดงต่อท้าย URL ที่ต้องการส่งข้อมูลไป โดยจะสามารถมองเห็นข้อมูลเหล่านั้นปรากฏในช่อง Address ของเบราเซอร์ เช่น http://www.myweb.com?get.php?name=“matinee”,age=30 2. การส่งข้อมูลแบบ POST เป็นการส่งข้อมูลที่ต้องอาศัยฟอร์ม จะมีความปลอดภัยมากกว่าเพราะไม่ได้ส่งข้อมูลร่วมไปกับ URL ทำให้มองไม่เห็นข้อมูลที่ส่งไป และสามารถรองรับปริมาณการส่งข้อมูลได้มากกว่าด้วย เว็บไซต์ ไฟล์ ข้อมูลที่ส่ง
การรับข้อมูลจากฟอร์ม การรับข้อมูลจากฟอร์มจะขึ้นอยู่กับว่าเป็นการรับข้อมูลที่ส่งแบบ POST หรือ GET การรับข้อมูลที่ส่งด้วยวิธี GET จะใช้ $_GET[‘ชื่อข้อมูล’] เช่น $name=$_GET[‘name’]; $age=$_GET[‘age’]; 2. การรับข้อมูลที่ส่งด้วยวิธี POST จะใช้ $_POST[‘ชื่อข้อมูล’] หรือ $_REQUEST[‘ชื่อข้อมูล’] เช่น $firstname=$_POST[‘firstname] $lastname=$_REQUEST[‘lastname’];
TAG ของ HTML ที่ใช้ในการสร้างองค์ประกอบ ต่าง ๆ ของฟอร์ม Form Tags Tag Description <form> สร้าง form รับข้อมูลจาก user <input> สร้าง text field (กล่องสำหรับรับข้อความบรรทัดเดียว) <textarea> สร้าง text area (กล่องสำหรับรับข้อความหลายบรรทัด) <select> สร้าง drop-down box <option> กำหนดตัวเลือกใน drop-down box <button> สร้างปุ่ม
Text Fields: ใช้ในการรับข้อมูลยาวไม่เกิน 1 บรรทัด <form> First name: <input type="text" name="firstname"> <br> Last name: <input type="text" name="lastname"> </form>
Text Password: ใช้ในการรับข้อมูลที่ไม่ต้องการเปิดเผยข้อมูล <form> Username: <input type="text" name="user"> <br> Password:<input type="password" name=“pwd"> </form> <p> Note that when you type characters in a password field, the browser displays asterisks or bullets instead of the characters. </p>
Text Area: ใช้รับข้อมูลยาวเกิน 1 บรรทัด <html> <body> <form> <textarea rows="10" cols="30"> The cat was playing in the garden. </textarea> </form> </body> </html>
Radio Buttons: ใช้รับข้อมูลที่เป็นตัวเลือก และสามารถเลือกได้เพียงหนึ่งตัวเลือกเท่านั้น <form> <input type="radio" name="sex" value="male" >Male <br> <input type="radio" name="sex" value="female">Female </form>
Radio Buttons <form> <input type="radio" name="sex" value="male" checked>Male <br> <input type="radio" name="sex" value="female">Female </form>
Checkboxes: ใช้รับข้อมูลที่เป็นตัวเลือกและสามารถเลือกได้หลายตัวเลือก <form> <input type="checkbox" name="bike" > I have a bike <br> <input type="checkbox" name="car"> I have a car </form>
Checkboxes <form> <input type="checkbox" name="bike" checked> I have a bike <br> <input type="checkbox" name="car"> I have a car </form>
Drop-Down Box: ใช้รับข้อมูลโดยการแสดงลิสต์ให้เลือก <form> <select name="cars"> <option value=“1">Volvo</option> <option value=“2">Saab</option> <option value=“3">Fiat</option> <option value=“4">Audi</option> </select> </form>
Drop-Down Box <option value=“1">Volvo</option> <form> <select name="cars"> <option value=“1">Volvo</option> <option value=“2">Saab</option> <option value=“3" selected>Fiat</option> <option value=“4">Audi</option> </select> </form>
List Box: ใช้รับข้อมูลโดยการแสดงลิสต์ให้เลือกและสามารถเลือกได้หลายตัวเลือก <form> <select name="cars" multiple> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> </form>
List Box <option value="volvo">Volvo</option> <form> <select name="cars" multiple> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat" selected>Fiat</option> <option value="audi">Audi</option> </select> </form>
Buttons: ใช้สำหรับคลิกเพื่อให้เกิดการทำงานต่าง ๆ <form> <input type=“submit" name=“submit" value=“Submit“> <input type=“reset" name=“reset" value=“Reset"> <input type=“button" name=“add" value=“Add"> </form> ปุ่มประเภท submit ใช้สำหรับส่งข้อมูลที่ผู้ใช้กรอกไปประมวลผล ปุ่มประเภท reset ใช้สำหรับเคลียร์ข้อมูลในฟอร์ม ปุ่มประเภท button จะมีการทำงานขึ้นอยู่กับการเขียนโปรแกรม
ตัวอย่างการสร้างฟอร์ม ไฟล์ apply.html <html> <body> <center> แบบฟอร์มสมัครเข้ารับราชการ </center><br> <form name="form1" method="post" action="apply.php"> ชื่อ <input type="text" name="firstname"> นามสกุล <input type="text" name="lastname"> <br><br>เพศ <input name="sex" type="radio" value="f">ชาย <input name="sex" type="radio" value="m">หญิง <br><br>ระดับการศึกษา <select name="education"> <option value="1">ปริญญาตรี</option> <option value="2">ปริญญาโท</option> <option value="3">ปริญญาเอก</option> </select><br> <br><br>ความสามารถทางภาษา <input name="eng" type="checkbox">อังกฤษ <input name="china" type="checkbox">จีน <input name="japan" type="checkbox">ญี่ปุ่น <input name="france" type="checkbox">ฝรั่งเศส <br><br>ความสามารถพิเศษ <textarea name="perform">กรุณากรอก</textarea> <br><br> <input type="submit" name="submit" value="ส่งใบสมัคร"> <input type="reset" name="reset" value="เคลียร์ข้อมูล"> </form> </body> </html> เมื่อคลิกที่ปุ่มประเภท submit จะส่งข้อมูลในฟอร์มไปประมวลผล ที่ไฟล์ apply.php
ตัวอย่างการรับข้อมูลจากฟอร์ม ไฟล์ apply.php <? echo "ชื่อ: ".$_POST['firstname']."<br>"; echo "นามสกุล: ".$_POST['lastname']."<br>"; echo "เพศ :"; if ($_POST['sex'] == 'f') echo "ชาย "; else echo "หญิง "; echo "<br>"; echo "ระดับการศึกษา :"; if ($_POST['education'] == 1) echo "ปริญญาตรี"; elseif ($_POST['education'] == 2) echo "ปริญญาโท"; else echo "ปริญญาเอก"; echo "ความสามารถทางภาษา :"; if ($_POST['eng']=='on') echo "อังกฤษ "; if ($_POST['china']=='on') echo "จีน "; if ($_POST['japan']=='on') echo "ญี่ปุ่น "; if ($_POST['france']=='on') echo "ฝรั่งเศส ";echo "<br>"; echo "ความสามารถพิเศษ :"; echo $_POST['perform'] ?>
ผลลัพธ์ของไฟล์ apply.html
ตัวอย่างการกรอกข้อมูลในฟอร์ม apply.html
ผลลัพธ์ที่ได้จาก apply.php เมื่อคลิกปุ่มส่งใบสมัครจาก apply.html
ตัวอย่างการใช้งาน nl2br () เพื่อให้แสดงข้อมูล ขึ้นบรรทัดใหม่ ฟังก์ชัน nl2br () นำมาใช้ร่วมกับการกรอกข้อมูลผ่าน Text area โดยทำหน้าที่แปลงเครื่องหมายที่มีการเว้นบรรทัด (เกิดจากการกด Enter) เป็นเท็ก <br> ซึ่งเป็นการแท็กของ HTML ที่ใช้เว้นบรรทัดโดยนิยมใช้เพื่อให้สามารถแสดงข้อมูลบนเบราเซอร์ได้ถูกต้อง ถ้าหากไม่ใช้ฟังก์ชันนี้ข้อมูลทั้งหมดจะแสดงต่อกันในบรรทัดเดียวตัวอย่างการใช้งาน nl2br() เช่น echo nl2br(($_POST[‘comment’])); 25
ตัวอย่างการสร้างฟอร์มรับข้อมูลจาก text area ไฟล์ comment.html <html> <body> <form name="form" method="post" action="showcomment.php"> comment: <textarea name="comment" cols=50 rows=5></textarea> <br><input type="submit" name="submit" value="submit"> </form> </body> </html>
ตัวอย่างการกรอกข้อมูลในฟอร์ม comment.html
ตัวอย่างการรับข้อมูลจาก comment.html ไฟล์ showcomment.php <? echo $_POST['comment']."<br>"; echo nl2br(($_POST['comment'])); ?>
ตัวอย่างโปรแกรมคำนวณราคาสินค้า ไฟล์ price.html <html> <body> <center> โปรแกรมคำนวนราคาสินค้า </center><br> <form name="form1" method="post" action=“price.php"> ราคาสินค้าต่อชิ้น <input type="text" name="price"><br> จำนวนชิ้นที่ซื้อ <input type="text" name="amount"><br> <input type="submit" name="submit" value="คำนวณราคา"> <input type="reset" name="reset" value="ยกเลิก"> </form> </body> </html>
ไฟล์ price.php <? $price=$_POST['price']; $amount=$_POST['amount']; $total_price=$price*$amount; $vat=$total_price * 0.07; $net_price=$total_price + $vat; echo "ราคาสินค้าต่อชิ้น = $price <br>"; echo "จำนวนชิ้นที่ซื้อ = $amount <br>"; echo "ราคารวม = $total_price <br>"; echo "ภาษีมูลค่าเพิ่ม = $vat <br>"; echo "ราคาสุทธิ = $net_price"; ?>
ตัวอย่าง ไฟล์ price.php ไฟล์ price.html