HTML Form, Textbox, Password, checkbox, radio, Text Area

การสร้างเว็บแอพพลิเคชั่นที่มีการรับข้อมูลจากผู้ใช้ จะประกอบไปด้วย 2 ส่วน คือ ส่วนของการรับข้อมูล และ ส่วนของการประมวลผล ส่วนของการรับข้อมูลคือส่วนของแบบฟอร์ม (Form) คือการสร้าง form ขึ้นมารับข้อมูลจากผู้ใช้ที่จะป้อนข้อมูลเข้ามาตามแบบฟอร์มที่เราสร้างไว้ โครงสร้างของ form เริ่มต้นด้วย แท็ก <form> และ ฟิลด์รับข้อมูลทั้งหลายในภาษา html เช่น ช่องรับข้อความ, เช็คบ็อก, และปุ่มเรดิโอ เมื่อผู้ใช้กดปุ่ม submit ข้อมูลก็จะถูกส่งไปยังส่วนที่สอง คือ ส่วนของการประมวลผล คือภาษา PHP

โครงสร้างของฟอร์ม

<form name="form_name" method="get/post" action="url">
...ส่วนของการรับข้อมูล...
</form>

name = ชื่อของฟอร์ม
method = กำหนดวิธีในการส่งข้อมูล มี 2 วิธีคือแบบ GET และแบบ POST
action = url การกำหนดปลายทางในเว็บเซิร์ฟเวอร์ที่จะส่งข้อมูลไปประมวลผล
การส่งแบบ GET คือการนำข้อมูลในฟอร์มไปต่อท้าย URL เป็นแบบ Query String ดังนั้นข้อมูลจะถูกเห็นได้จากช่อง URL อาจจะไม่ปลอดภัยสำหรับการส่งข้อมูลที่เป็นควาามลับ
การส่งแบบ POST ข้อมูลจะถูกซ่อน ไม่นำมาต่อท้าย URL เหมือนแบบ GET

ส่วนของการรับข้อมูลมี
ช่องรับข้อความ (Text File หรือ Textbox)
รูปแบบ

<input type="text" name="" value="" size="" maxlength=""/>

type = "ชนิดของช่องรับข้อมูล เช่น text, password, checkbox, radio"
name = "ชื่อของช่องรับข้อความ"
value = "ค่าเริ่มต้น ทีเรากำหนดผู้ใช้สามารถแก้ไขได้"
size = "ความกว้างของช่องรับข้อความ"
maxlength = "จำนวนตัวอักษรสูงสุดที่ป้อนได้"

Type ชนิด text ตัวอย่าง

<form name="form1" method="post" action="text.php">
ชื่อ : <input type="text" name="username" size="20" maxlength="40"/><br/>
นามสกุล : <input type="text" name="lastname" size="20" maxlength="40"/><br/>
</form>

ชื่อ :
นามสกุล :

---

Type ชนิด password ตัวอย่าง

<form name="form1" method="post" action="password.php">
ชื่อ : <input type="text" name="username" size="20" maxlength="40"/><br/>
รหัสผ่าน : <input type="password" name="password" size="20" maxlength="8"/><br/>
</form>

ชื่อ :
รหัสผ่าน :

---

Type ชนิด checkbox ตัวอย่าง

<form name="form1" method="post" action="checkbox.php">
คุณชอบทาน :
<input type="checkbox" name="drink" value="tea"/>ชา&nbsp;&nbsp;
<input type="checkbox" name="drink" value="coffee"/>กาแฟ&nbsp;&nbsp;
<input type="checkbox" name="drink" value="milk"/>นม
</form>

คุณชอบทาน : ชา   กาแฟ   นม

---

Type ชนิด radio ตัวอย่าง

<form name="form1" method="post" action="radio.php">
ระหว่างเงาะ กับ ลองกอง คุณชอบทานอะไรมากที่สุด :
<input type="radio" name="fruit" value="0"/>เงาะ&nbsp;&nbsp;
<input type="radio" name="fruit" value="1"/>ลองกอง&nbsp;&nbsp;
</form>

ระหว่างเงาะ กับ ลองกอง คุณชอบทานอะไรมากที่สุด : เงาะ   ลองกอง

---

ช่องรับข้อความแบบหลายบรรทัด (Text Area)
รูปแบบ

<textarea name="ชื่อ" cols="ความกว้าง" rows="ความสูง">..ค่าเริ่มต้นของแท็ก มีหรือไม่มีก็ได้..</textarea>

 ตัวอย่าง Text Area

<form>
<textarea name="address" cols="40" rows="4">กรอกที่อยู่ของคุณลงในช่องนี้</textarea>
</form>

กรอกที่อยู่ของคุณลงในช่องนี้

บทความนี้เป็นบทความพื้นฐานสำหรับมือใหม่หัดขัดขับ แบบรวบรัดเป็นเร็ว ส่วนคนที่รู้แล้วก็ ขออภัยด้วยครับ ...