ในการสร้างเว็บไซต์สำหรับรับข้อมูล สิ่งที่จำเป็นจะต้งเรียนรู้ไม่แพ้ PHP เลยนั่นก็คือภาษา HTML อันที่จริงแล้วจะบอกว่าการสร้างเว็บเพจทุกหน้าจะแสดงผลด้วย HTML ถึงจะถูก แต่ในส่วนที่จะกล่าวถึงต่อไปนี้คือส่วนของแบบฟอร์มรับข้อมูล (HTML Form) ซึ่งจะประกอบด้วยช่องรับข้อมูลอยู่หลายชนิดด้วยกัน ดังนี้
1. ช่องรับข้อมูลแบบป้อนข้อความลงไปในช่องว่าง
1.1 Text Fields ช่องรับข้อมูลแบบบรรทัดเดียว <input type="text/password"/>
1.2 Textarea ช่องรับข้อมูลแบบหลายบรรทัด <textarea></textarea>
2. ช่องรับข้อมูลแบบตัวเลือก เลือกได้อย่างเดียว
2.1 Radio Button <input type="radio"/>
2.2 Select Option <select>...option...</select>
3. ช่องรับข้อมูลแบบตัวเลือก ที่สามารถเลือกได้หลายตัวเลือก
3.1 Checkbox <input type="checkbox"/>
3.2 Multi Select Option <select multiple>...option...</select>
4. ช่องรับข้อมูลแบบซ่อน จะไม่แสดงให้เห็นบนหน้าเว็บเพจ <input type="hidden"/>
มาดูซอร์สโค๊ดและหน้าตา html form กันทีละหัวข้อกันเลยครับ เริ่มจากการสร้างแท็กแบบฟอร์มสำหรับป้อนข้อมูลเพื่อส่งไปบันทึกข้อมูลลงในฐานข้อมูล
ในกรณีที่แบบฟอร์มของเราใช้อัพโหลดข้อมูลด้วย จะต้องมีการเพิ่มแอดตทริบิวต์ที่สำคัญอีกตัวเข้าไปในแท็ก <form> ด้วยนั่นก็คือ enctype="multipart/form-data"
ติดตามหัวข้อต่อไปได้ที่ "ช่องรับข้อมูลแบบตัวเลือก เลือกได้อย่างเดียว"
1. ช่องรับข้อมูลแบบป้อนข้อความลงไปในช่องว่าง
1.1 Text Fields ช่องรับข้อมูลแบบบรรทัดเดียว <input type="text/password"/>
1.2 Textarea ช่องรับข้อมูลแบบหลายบรรทัด <textarea></textarea>
2. ช่องรับข้อมูลแบบตัวเลือก เลือกได้อย่างเดียว
2.1 Radio Button <input type="radio"/>
2.2 Select Option <select>...option...</select>
3. ช่องรับข้อมูลแบบตัวเลือก ที่สามารถเลือกได้หลายตัวเลือก
3.1 Checkbox <input type="checkbox"/>
3.2 Multi Select Option <select multiple>...option...</select>
4. ช่องรับข้อมูลแบบซ่อน จะไม่แสดงให้เห็นบนหน้าเว็บเพจ <input type="hidden"/>
มาดูซอร์สโค๊ดและหน้าตา html form กันทีละหัวข้อกันเลยครับ เริ่มจากการสร้างแท็กแบบฟอร์มสำหรับป้อนข้อมูลเพื่อส่งไปบันทึกข้อมูลลงในฐานข้อมูล
<form method="POST" action="php-save-data.php">
.... ตัวเลือกรับข้อมูลต่างๆจะอยู่ในนี้
</form>
ในกรณีที่แบบฟอร์มของเราใช้อัพโหลดข้อมูลด้วย จะต้องมีการเพิ่มแอดตทริบิวต์ที่สำคัญอีกตัวเข้าไปในแท็ก <form> ด้วยนั่นก็คือ enctype="multipart/form-data"
<form method="POST" action="php-save-data.php" enctype="multipart/form-data">
.... ตัวเลือกรับข้อมูลต่างๆจะอยู่ในนี้
</form>
1. ช่องรับข้อมูลแบบป้อนข้อความลงไปในช่องว่าง
ในส่วนนี้จะมีอินพุตอยู่ 2 ตัวที่ใช้รับค่านี้นั่นก็คือ Type ที่เป็นแบบ Text,Password และตัวรับค่าที่เป็น TextArea1.1 ช่องรับข้อมูลแบบบรรทัดเดียว Text Fields จะมีอยู่ 2 ชนิดคือ type="text" และ type="password"
<!DOCTYPE html>
<html>
<body>
<form action="php-login-form.php">
<table>
<tr>
<td>ชื่อล็อกอิน : </td>
<td><input type="text" name="txt_uname" value=""></td>
</tr>
<tr>
<td>รหัสผ่าน : </td>
<td><input type="text" name="txt_upass" value=""></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="ล็อกอิน"></td>
</tr>
</table>
</form>
</body>
</html>
2. ช่องรับข้อมูลแบบหลายบรรทัด Textarea
<!DOCTYPE html>
<html>
<body> <form action="php-save-data.php">
<h4>ช่องรับข้อมูลแบบหลายบรรทัด</h4>
<textarea rows="4" cols="50">
พีเอชพี (PHP) คือ ภาษาคอมพิวเตอร์ในลักษณะเซิร์ฟเวอร์-ไซด์ สคริปต์ โดยลิขสิทธิ์อยู่ในลักษณะโอเพนซอร์ส ภาษาพีเอชพีใช้สำหรับจัดทำเว็บไซต์ และแสดงผลออกมาในรูปแบบ HTML โดยมีรากฐานโครงสร้างคำสั่งมาจากภาษา ภาษาซี ภาษาจาวา และ ภาษาเพิร์ล ซึ่ง ภาษาพีเอชพี นั้นง่ายต่อการเรียนรู้ ซึ่งเป้าหมายหลักของภาษานี้ คือให้นักพัฒนาเว็บไซต์สามารถเขียน เว็บเพจ ที่มีความตอบโต้ได้อย่างรวดเร็ว
</textarea>
</form>
</body>
</html>
ติดตามหัวข้อต่อไปได้ที่ "ช่องรับข้อมูลแบบตัวเลือก เลือกได้อย่างเดียว"
ความคิดเห็น
แสดงความคิดเห็น