1. Basic PHP Programming
HTML Form และ การรับข้อมูลจากผู้ใช้
โดย
อ.เรวดี พิพฒน์สูงเนิน
ั
สาขาวิชาวิทยาการคอมพิวเตอร์และเทคโนโลยีสารสนเทศ
คณะวิทยาศาสตร์ มหาวิทยาลัยราชภัฏอุดรธานี

2. ฟอร์ม (Form)
• แท็ก <form> เป็นแท็กที่บรรจุแท็กอื่น ๆ ที่ใช้ในการรับข้อมูล
จากผู้ใช้เพื่อส่งค่าไปยังเซิร์ฟเวอร์
• แอตทริบิวต์พื้นฐานที่จาเป็นในแท็ก <form>
– action : กาหนดเพจปลายทางในเว็บเซิรฟเวอร์ที่จะส่งข้อมูล
์
– method : กาหนดวิธีการส่งข้อมูล มี 2วิธี ได้แก่ GET , POST
• รูปแบบ
<form method = “POST” action = “register.php”>
…
</form>

3. ช่องรับข้อความ (TextBox)
• รูปแบบ
<input type=“text” name=“ชื่อ” value=“ค่าเริ่มต้น”
size= “ความกว้าง” maxlength = “จานวนตัวอักษร”>
• เช่น
<input type=“text” name=“firstname” size= “20”>
ผลลัพธ์

4. ช่องรับรหัสผ่าน (PasswordBox)
• รูปแบบ
<input type=“password” name=“ชื่อ” value=“ค่าเริ่มต้น”
size= “ความกว้าง” maxlength = “จานวนตัวอักษร”>
• เช่น
<input type=“password” name=“pwd” size= “20”>
ผลลัพธ์

5. ช่องรับข้อมูลหลายบรรทัด (TextArea)
• รูปแบบ
<textarea name =“ชื่อ” cols=“ความกว้าง” rows=“จานวนแถว”>
</textarea>
• เช่น
<textarea name =“address” cols=“50” rows=“4”>
</textarea>
ผลลัพธ์

6. เช็คบ๊อกซ์(CheckBox)
• รูปแบบ
<input type=“checkbox” name=“ชื่อ” value=“ค่า”>
• เช่น
ผลลัพธ์

7. ปุ่มเรดิโอ(Radio Button)
• รูปแบบ
<input type=“radio” name=“ชื่อ” value=“ค่า”>
• เช่น
ผลลัพธ์

8. ลิสต์บ๊อกซ์(ListBox)
• รูปแบบ
<select name=“ชื่อ” size=“ความสูง” multiple>
<option value=“ค่า” selected>ข้อความ</option>
</select>
• เช่น

9. ลิสต์บ๊อกซ์(ListBox)

10. ลิสต์บ๊อกซ์(ListBox)

11. Hidden field
• จะไม่แสดงข้อมูลบนหน้าเว็บ แต่สามารถกาหนดค่าและส่งค่า
ไปยังเพจอื่นได้
• รูปแบบ
<input type=“hidden” name=“ชื่อ” value=“ค่า”>

12. ช่องรับชือไฟล์
่
• รูปแบบ
<input type=“file” name=“ชื่อ” size=“ความกว้าง”
maxlength=“จานวนตัวอักษร”>
• เช่น

13. ปุ่มคาสั่ง
• ปุ่มส่งข้อมูล (Submit Button) ใช้ส่งข้อมูลจากฟอร์มไปยัง
เซิร์ฟเวอร์
• รูปแบบ
<input type=“submit” name=“ชื่อ” value=“ค่า>
• เช่น

14. ปุ่มคาสั่ง
• ปุ่มล้างข้อมูล(Reset Button) ใช้ล้างข้อมูลจากฟิลด์ต่าง ๆ
ภายในฟอร์ม
• รูปแบบ
<input type=“reset” name=“ชื่อ” value=“ค่า>
• เช่น

15. ปุ่มคาสั่ง
• ปุ่มธรรมดา(Button) นิยมใช้เพื่อเขียนสคริปต์ที่ทางานฝั่ง
ไคลเอนต์ เช่น JavaScript โดยเขียนคาสั่งไว้ที่ event
“OnClick” เพื่อให้เกิดการทางานบางอย่าง
•<input type=“button” name=“ชื่อ” value=“ค่า>
รูปแบบ
• เช่น

16. WorkShop
• ให้สร้างฟอร์มสมัครสมาชิก

17. เปรียบเทียบการส่งข้อมูลแบบ GET และ POST
• การส่งข้อมูลด้วยวิธี GET
• เว็บบราวเซอร์จะนาข้อมูลจากฟอร์มมาจัดรูปแบบเป็น Query
String และระบุต่อท้าย URL ของเพจปลายทาง
Query String

18. เปรียบเทียบการส่งข้อมูลแบบ GET และ POST
• การส่งข้อมูลด้วยวิธี POST
• ข้อมูลที่ส่งผ่านฟอร์มจะถูกเข้ารหัส(URL Encoding) ทาให้
มองไม่เห็นข้อมูลที่ส่งไป
Query String

19. การรับข้อมูลด้วยคาสั่ง $_GET
• การรับข้อมูลด้วยคาสั่ง $_GET ใช้กับการส่งข้อมูลมายังเพจ
แบบ Query String คือส่งจากฟอร์มด้วย method = “get”
หรือการส่งค่าแนบต่อท้าย URL
• รูปแบบ
$_GET[ตัวแปรที่ส่งค่ามา]

20. Ex. การรับ-ส่งข้อมูลด้วยวิธี GET จากฟอร์ม
ไฟล์
form1.html
ค่า URL บน Address bar
ไฟล์
welcome.php

21. Ex. การรับ-ส่งข้อมูลด้วยวิธี GET จากลิงก์
ใช้แท็กลิงก์ และแนบข้อมูลต่อท้าย URL
ค่า URL บน Address bar
ไฟล์
welcome.php

22. การรับข้อมูลด้วยคาสั่ง $_POST
• การรับข้อมูลด้วยคาสั่ง $_POST ใช้กับการส่งข้อมูลมายังเพจ
จากการส่งจากฟอร์มด้วย method = “post”
• รูปแบบ
$_POST[ตัวแปรที่ส่งค่ามา]

23. Ex. การรับ-ส่งข้อมูลด้วยวิธี POST จากฟอร์ม
ไฟล์
form2.html
ค่า URL บน Address bar
ไฟล์
welcome.php

24. การรับข้อมูลด้วยคาสั่ง $_REQUEST
• การรับข้อมูลด้วยคาสั่ง $_REQUEST ใช้กับการส่งข้อมูลมายัง
เพจจากการส่งจากฟอร์มด้วย method = “post” และ
method =“get”
• รูปแบบ
$_REQUEST[ตัวแปรที่ส่งค่ามา]