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

thank you
 
บทที่ 6
การสร้างฟอร์ม


1. รูปแบบการสร้าง Form

การสร้างแบบฟอร์ม (Form) ควบคุมด้วยแท็ก FORM และ INPUT โดยมีรูปแบบดังนี้

<FORM พารามิเตอร์>
<INPUT TYPE="TEXT" NAME="ชื่อของเท็กซ์บอกซ์" VALUE=”ค่าเริ่มต้น”
SIZE=ขนาดของเท็กซ์บอกซ์ MAXLENGTH=จำนวนตัวอักษรที่สามารถบันทึกได้>

</FORM>

     ตัวอย่างการใช้คำสั่ง 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>

—เลือกข้อความ— ชื่อตัวแปร1 ชื่อตัวแปล 2

แปลความหมาย
<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
รายได้: ไม่มีรายได้ 5000 บาท มากกว่า5000บาท

กลับด้านบน

This entry was posted in Uncategorized. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s