การสร้างฟอร์มHTML

บทนำ
การสร้างแบบฟอร์ม (Form) เพื่อใช้ในการรับข้อมูลเป็นวิธีการหนึ่งที่นิยมทำกันในเว็บไซต์ทั่วไป เพราะการสร้างแบบฟอร์มจะทำให้กรอกข้อมูลได้ง่ายเป็นระเบียบสวยงาม และเป็นสัดส่วน ตัวอย่างแบบฟอร์มที่ใช้กันทั่วไปเช่นการกรอกข้อมูลในการสมัครสมาชิกต่าง ๆ การแสดงความคิดเห็น การกรอกแบบสอบถาม สิ่งเหล่านี้ถือได้ว่าเป็นการรับข้อมูลผ่านฟอร์มทั้งสิ้น การออกแบบฟอร์มให้มีลักษณะต่าง ๆ ขึ้นอยู่กับประโยชน์ในการใช้งานของ
1. รูปแบบการสร้าง Form
การสร้างแบบฟอร์ม (Form) ควบคุมด้วยแท็ก FORM และ INPUT โดยมีรูปแบบดังนี้
<FORM พารามิเตอร์>
         <INPUT TYPE="TEXT" NAME="ชื่อของเท็กซ์บอกซ์" VALUE=”ค่าเริ่มต้น”SIZE=ขนาดของเท็กซ์บอกซ์ MAXLENGTH=จำนวนตัวอักษรที่สามารถบันทึกได้>

</FORM>
2. ตัวอย่างการสร้าง Form แบบต่าง ๆ
2.1 การสร้างที่ใส่ชื่อ

Username : <Input Type="text" size="15" maxlength="20">
Username :
2.2 การสร้าง password

Password : <Input Type="password" size="15" maxlength="25">
Password :
2.3 แปลความหมาย

<Input type="......"> คือการใส่ค่า Form ที่ต้องการเช่นต้องการ Form ใส่ชื่อ ก็ให้ใส่ Type ไว้ว่า Text
หรือจะใส่ password ก็ให้ใส่ Type ไว้ว่า password
<Input size="....">ใส่ขนาดความกว้างของ Form ค่าเป็นตัวเลข เช่น 15
<Input maxlength="...."> ขนาดความจุของตัวอักษรซึ่งถ้าเกินจำนวนที่ระบุจะไม่กรอกเข้าไปใน input มีค่าเป็นตัวเลข เช่น 25
2.4 การสร้างปุ่ม Button
การสร้างปุ่ม Button ใน Form สามารถทำได้ทั้งปุ่มส่งหรือรับข้อมูล (Submit) และปุ่มยกเลิกการทำงานหรือ Reset
<Input type="submit" value="ส่งข้อมูล" name="data">

<Input type="reset" value="ลบข้อมูล" name="data">
แปลความหมาย
type ของการส่งคือ submit และ type ของการรีเซ็ตคือ reset ส่วน name เป็นการกำหนดชื่อข้อมูลเพื่อส่งไปประมวลผล
2.5 การสร้างปุ่ม Checkbox
checkbox เป็นรูปแบบการเลือกชนิดเลือกได้หลายรายการ มีประโยชน์มากในการสร้างตัวเลือกที่ไม่จำเป็นต้องพิมพ์ข้อมูลลงไป เพียงแต่คลิกเลือกที่ปุ่มนั้นๆ ก็เป็นการกรอกเพื่อรับข้อมูล ปุ่มแบบ checkbox สามารถกำหนดค่าได้หลายค่าหรือเลือกได้หลายตัวเลือก
รูปแบบ
<Input type="checkbox" name="ชื่อของปุ่ม checkbox นี้" value="ค่าที่ส่งไปประมวลผลเมื่อกระทำที่ปุ่มนี้">
ตัวอย่าง
<Input type="checkbox" name="check" value="1">รายได้มากกว่า30000บาท

รายได้มากกว่า30000บาท
2.6 การสร้างปุ่ม Radiobox
รูปแบบจะคล้ายๆกับ checkbox เพียงแต่สามารถเลือกข้อมูลเพียงตัวเลือกเดียวเท่านั้นเหมาะสำหรับนำไปใช้การเลือกคำถามที่มีตัวเลือก 2 ตัวเลือกเช่นแบบทดสอบ หรือ เลือกเพศ เป็นต้น
รูปแบบ
<Input type="radio" name="ชื่อของปุ่ม checkbox นี้" value="ค่าที่ส่งไปประมวลผลเมื่อกระทำที่ปุ่มนี้">
ตัวอย่าง
<Input type="radio" name="sex" value="0">เพศชาย
<Input type="radio" name="sex" value="0">เพศหญิง
เพศชาย
เพศหญิง
2.7 การสร้างที่กรอกข้อความที่มีจำนวนมาก ๆ
การสร้างฟอร์มรับข้อมูลแสดงความคิดเห็นจะใช้คำสั่ง TEXT AREA ในการรับข้อมูลที่มีความยาวมากกว่าหนึ่งบรรทัด โดยมีรูปแบบคำสั่งดังนี้

<TEXTAREA rows="จำนวนแถว" cols="จำนวนตัวอักษรในแต่ละแถว">
</TEXTAREA>

ตัวอย่าง
<TEXTAREA rows="5" cols="20">
</TEXTAREA>

สามารถเพิ่มขนาดของ Textarea ได้โดยไปตั้งค่าที่ Rows หรือ Cols
2.8 การสร้างดรอปดาวน์ลิสต์ (Drop Drown List)
การสร้างดรอปดาวน์ลิสต์ (Drop Drown List) เป็นการรับข้อมูลจากการคลิกเมาส์เลือกรายการ ที่กำหนดไว้ โดยจะเลือกได้เพียงหนึ่งรายการ โดยมีรูปแบบการใช้คำสั่งดังนี้

<SELECT>
<OPTION SELECTED>---เลือกข้อความ---
<OPTION VALUE=1>ชื่อตัวแปร1
<OPTION VALUE=2>ชื่อตัวแปล 2
</SELECT>


แปลความหมาย
<SELECT>......</SELECT>คือคำสั่งเริ่มต้นปุ่มทางเลือก
<OPTION VALUE="....">ให้ใส่ค่าของตัวเลือกใน Value และใส่ขอความด้านนอก
<OPTION SELECTED> ตั้งค่าว่าคำสั่งนี้คือเป็นทางเลือกแรก

3. ตัวอย่างการประยุกต์ Form มาใช้งาน
<form name="register" action="reg_setup.php" method="post">
      ชื่อ: <input type="text" name="firstname" size=13>
      นามสกุล: <input type="text" name="surname" size=13>
      Email: <input type="text" name="email" size=13>
     เพศ: <input type="radio" name="sex" value="male">male <input type="radio" name="sex"   value="female">female
     รายได้: <select name="salary"><option selected>ไม่มีรายได้</option><option value="5000">5000 บาท</option><option value=">5000">มากกว่า5000บาท</option></select>
<input name="register" type="submit" value="ลงทะเบียน"><input name="reset" type="reset" value="ลบข้อมูล">
</form>
ส่วนบนของฟอร์ม
ชื่อ:
นามสกุล:
Email:
เพศ: male female
รายได้:

ส่วนล่างของฟอร์ม