Transcript ppt

การสร้างฟอร์มรับข้อมูล
ง30213 การเขียนเว็บเพจด้ วยภาษาสคริปต์
อ.วีระ คงกระจ่าง
ศูนย์คอมพิวเตอร์ โรงเรียนปลวกแดงพิทยาคม
ฟอร์มในภาษา html
แบบฟอร์มถือว่าเป็ นส่วนที่ใช้ ในการรับข้ อมูล
ภาษา HTML ก็สามารถสร้ างแบบฟอร์ม
ขึ้นมาเพื่อใช้ รับข้ อมูลได้ เช่นเดียวกัน
รูปแบบในการสร้างฟอร์ม
<FORM method=วิธกี ารส่งข้ อมูล
action=ชื่อไฟล์ท่จี ะมารับข้ อมูล>

ข้ อมูลของแบบสอบถาม
</FORM>
อธิบาย
วิธกี ารส่งข้ อมูล get และ post
ชื่อไฟล์ท่จี ะมารับข้ อมูลคือไฟล์ท่คี อยรับ
ข้ อมูลจาก form
ประเภทของฟอร์ม
input
textarea
select
textarea
เป็ นกรอบในการรับข้ อมูลที่สามารถรับได้
หลายบรรทัด
มักจะใช้ ในการรับข้ อคิดเห็น
หรือรายละเอียดต่างๆ
รูปแบบของ textarea
 <form method=วิธกี ารส่งข้ อมูล action=ชื่อ
ไฟล์ท่จี ะมารับข้ อมูล>
 <textarea name=ชื่อของข้ อมูล
rows=จานวนแถว
cols=จานวนสดมภ์>

ข้ อความอื่นๆ
 </textarea>
 </form>
ความหมาย
คาว่า textarea ใน tag จะต้ องติดกัน rows
ก็คือ จานวนแถวในการรับข้ อมูล cols ก็คือ
จานวนสดมภ์หรือคอลัมน์
ชื่อของข้ อมูล จะเป็ นตัวแปรที่ใช้ ในการรับข้ อมูล
มีความสาคัญมาก จะต้ องตรงกับตัวแปรในภาษา
php
ตัวอย่างการใช้
 <form action=showform.php method=post>
 <textarea name=comment rows=5 cols=40 >
 S H O W T I M E :::::::::::::::::::::
 </textarea>
 </form>
อธิบาย
จากตัวอย่างเป็ นการสร้ าง text area ซึ่งมี
จานวน 5 แถวและแต่ละแถวมีขนาด 40
ตัวอักษร โดยค่าของข้ อมูลที่ป้อนจะถูกเก็บอยู่ใน
ตัวแปรชื่อ comment
เมื่อมีการส่งข้ อมูลจะส่งไปให้ ไฟลชื่อ
showform.php โดยวิธกี าร post
ผลทีไ่ ด้
select
select คือ แบบรับข้ อมูลที่ให้ ผ้ ูใช้ เลือกโดย
จะมีปุ่มลูกศรเพื่อให้ ผ้ ูใช้ เลือกตัวเลือกที่
ต้ องการ
รูปแบบการใช้ select
 <form method=วิธกี ารส่งข้ อมูล action=ชื่อไฟล์ท่จี ะมารับข้ อมูล>
 <select name=”ชื่อข้ อมูล”0>
 <option selected value=”ค่าตัวเลือกที่ 1”> ตัวเลือกที่ 1
</option>
 <option value = “ค่าตัวเลือกที่ 2” >ตัวเลือกที่ 2 </option>

………
 <option value = “ค่าตัวเลือกที่ n” >ตัวเลือกที่ n </option>
 </select>
 </form>
ตัวอย่าง
 <FORM action=showform.php method=post >
 <SELECT NAME = number>
 <option selected value=1>number1</option>
 <option value = 2> number2 </option>
 <option value = 3> number3 </option>
 </SELECT>
 </FORM>
อธิบาย
 จากตัวอย่างจะเห็นได้ ว่ามีตัวเลือกทั้งหมด 3 ตัวเลือกคือ
number1, number2, number3สาหรับคาว่า
selected ในตัวเลือกแรกหมายถึง ตัวเลือกนั้นจะเป็ น
ตัวเลือกที่ถูกแสดง ดังนั้นถ้ าเราต้ องการให้ ตัวเลือกใดเป็ น
ตัวเลือกที่ถูกเลือกก็ให้ ใส่คาว่า selected ลงไป
 ค่าที่ป้อนไปจะเก็บในตัวแปรชื่อ number เช่น ถ้ าผู้ใช้
เลือก number3 ค่าของตัวแปร number จะมีค่าเป็ น
3 เมื่อมีการส่งข้ อมูลจะส่งไปให้ ไฟลชื่อ
showform.php โดยวิธกี าร post
ผลทีไ่ ด้
input
แบบฟอร์มแบบ input จะเป็ นแบบฟอร์มที่
มีการใช้ งานบ่อย มีประเภทย่อยอยู่หลาย
ชนิดด้ วยกัน เราจะแบ่งเป็ นประเภทย่อย
ต่างๆได้ ดังนี้
text
จะเป็ นฟอร์มรับข้ อมูลแบบบันทัดเดียว
รูปแบบของ text
 <FORM method=วิธกี ารส่งข้ อมูล action=ชื่อ
ไฟล์ท่จี ะมารับข้ อมูล>
<INPUT NAME="ชื่อของข้ อมูล" TYPE=TEXT
SIZE=number MAXLENGTH=number >
ข้ อมูลที่ต้องการแสดงผล
</FORM>
 โดยที่ size ก็คือ จานวนตัวอักษรที่รับได้ maxlength
คือจานวนตัวอักษรสูงสุดที่สามารถรับได้
ตัวอย่างการใช้ text
<FORM action=showform.php
method=post >
<INPUT NAME=data TYPE=TEXT
SIZE=10 MAXLENGTH=20 >
 Show
</FORM>
อธิบาย
 จากตัวอย่างจะเป็ นการสร้ างฟอร์มรับข้ อมูลแบบ
text ที่มีขนาดของช่อง 10 และสามารถรับได้ สงู สุด
20 ตัวอักษรและมีข้อความ show บริเวณหน้ าช่อง
 ข้ อมูลที่ผ้ ูใช้ ป้อนจะถูกเก็บอยู่ในตัวแปรชื่อ data
 เมื่อมีการส่งข้ อมูลจะส่งไปให้ ไฟลชื่อ
showform.php โดยวิธกี าร post
ผลทีไ่ ด้
password
เป็ นข้ อความที่อ่านไม่ออกโดยปกติจะใช้
สัญลักษณ์ * แทนตัวอักษร 1 ตัว
รูปแบบของ password
 <FORM method=วิธกี ารส่งข้ อมูล
action=ชื่อไฟล์ท่จี ะมารับข้ อมูล>
<INPUT NAME=ชื่อของข้ อมูล TYPE=PASSWORD
SIZE=number MAXLENGTH=number >
</FORM>
ตัวอย่างการใช้ password
<FORM action=showform.php
method=post >
<INPUT NAME=pass
TYPE=PASSWORD SIZE=10
MAXLENGTH=10 >
</FORM>
ผลทีไ่ ด้
Checkbox
เป็ นแบบฟอร์มที่แสดงข้ อความต่างๆไว้ ให้
เลือก ลักษณะที่สาคัญคือสามารถเลือกได้
หลายตัวเลือก
รูปแบบของ Checkbox
 <FORM method=วิธกี ารส่งข้ อมูล action=ชื่อไฟล์ท่จี ะมารับ
ข้ อมูล>
<INPUT NAME="ชื่อของข้ อมูล 1" TYPE="CHECKBOX"
VALUE="ค่าตัวเลือก1" CHECKED >ข้ อมูลที่ต้องการแสดงผล
<INPUT NAME="ชื่อของข้ อมูล 2" TYPE="CHECKBOX"
VALUE="ค่าตัวเลือก2" >ข้ อมูลที่ต้องการแสดงผล
<INPUT NAME="ชื่อของข้ อมูล 3" TYPE="CHECKBOX"
VALUE="ค่าตัวเลือก3" >ข้ อมูลที่ต้องการแสดงผล
</FORM>
ตัวอย่าง Checkbox
 <FORM action=showform.php method=post >
<INPUT NAME=A01 TYPE=CHECKBOX >SHOW1
<INPUT NAME=A02 TYPE=CHECKBOX checked>SHOW2
<INPUT NAME=A03 TYPE=CHECKBOX >SHOW3
</FORM>
อธิบาย
 จากตัวอย่าง จะเป็ นการแสดง checkbox ให้ เลือกทั้งสิ้น 3
อย่าง ลักษณะของ checkbox จะเป็ นรูปสี่เหลี่ยมสามารถ
เลือกได้ หลายช่อง จากตัวอย่างในรายการที่สองจะมีคาว่า
checked อยู่ด้วยแสดงว่า ตัวเลือกนั้นถูกเลือกมาก่อนแล้ ว
เพราะฉะนั้นถ้ าต้ องการให้ ตัวเลือกใดมีเครื่องหมายถูกเลือก
มาก่อนก็ให้ ใส่คาว่า checked ไว้ ท่ตี ัวเลือกนั้น
 ตัวแปรของ checkbox จะต้ องมีช่ ือที่แตกต่างกัน ตัวแปร
ใดที่ถูกเช็ค ค่าของตัวแปรจะมีค่าเป็ น checked
ผลทีไ่ ด้
Radio
 มีรูปแบบคาสั่งดังนี้
 <FORM method=วิธกี ารส่งข้ อมูล action=ชื่อไฟล์ท่จี ะมารับ
ข้ อมูล>
<INPUT NAME="ชื่อของข้ อมูล" TYPE="RADIO"
VALUE="ค่าตัวเลือก1" CHECKED >ข้ อมูลที่ต้องการแสดงผล
<INPUT NAME="ชื่อของข้ อมูล" TYPE="RADIO"
VALUE="ค่าตัวเลือก2" >ข้ อมูลที่ต้องการแสดงผล
<INPUT NAME="ชื่อของข้ อมูล" TYPE="RADIO"
VALUE="ค่าตัวเลือก3" >ข้ อมูลที่ต้องการแสดงผล
</FORM>
ตัวอย่าง Radio
 <FORM action=showform.php method=post >
<INPUT NAME=A00 TYPE=RADIO VALUE=1 CHECKED
>SHOW1
<INPUT NAME=A00 TYPE=RADIO VALUE=2 >SHOW2
<INPUT NAME=A00 TYPE=RADIO VALUE="3" >SHOW3
</FORM>
อธิบาย
 จากตัวอย่างจะคล้ ายๆกับ checkbox สิ่งที่แตกต่างกันกัน
คือ radio จะมีรปู เป็ นวงกลมและเช็คได้ เพียงช่องเดียว นั่น
คือถ้ าผู้ใช้ คลิ๊กเลือกช่องอื่น ช่องที่เคยถูกเลือกก็จะหายไป
 ตัวแปรของ checkbox จะต้ องมีช่ อื เดียวกัน โดยค่าของตัว
แปรจะมีค่าเท่ากับค่าที่ผ้ ูใช้ เลือกเช่นในตัวอย่างนี้ถ้าผู้ใช้ เลือก
SHOW2 ค่าของตัวแปร A00 จะมีค่าเป็ น 2
 เมื่อมีการส่งข้ อมูลจะส่งไปให้ ไฟลชื่อ showform.php โดย
วิธกี าร post
ผลทีไ่ ด้
Button
 มีรูปแบบคาสั่งดังนี้
 <form method=วิธกี ารส่งข้ อมูล action=ชื่อไฟล์ท่จี ะมารับ
ข้ อมูล>
 <input type=button value = “ชื่อที่ปรากฎอยู่บนปุ่ ม”>
 </form>
ตัวอย่างการใช้ Button
 <form action=showform.php method=post >
 <input type=button value=แสดงภาพ>
 </form>
 จากตัวอย่างผลที่ได้ คือจะเป็ นปุ่ ม บนปุ่ มจะมีข้อความว่า แสดงภาพ
 input ประเภทปุ่ มจะไม่มตี ัวแปรเพราะไม่สามารถเป็ บข้ อมูลได้
ผลทีไ่ ด้
Submit
 เป็ นปุ่ มที่ใช้ ยืนยันในการส่งข้ อมูล มีรป
ู แบบคาสั่งดังนี้
 <FORM method=วิธกี ารส่งข้ อมูล action=ชื่อไฟล์ท่จี ะมา
รับข้ อมูล>
<INPUT TYPE="SUBMIT" VALUE="ข้ อความที่
แสดงผลบนปุ่ ม" >
<INPUT TYPE="SUBMIT" >
</FORM>
ตัวอย่างการใช้ Submit
 <FORM action=showform.php method=post>
<INPUT TYPE="SUBMIT" VALUE="GO" >
</FORM>
 จากตัวอย่างจะได้ ผลลัพธ์ท่ไี ด้ เหมือนกับ button มีข้อความบน
ปุ่ มว่า GO
 submit มีเป้ าหมายสาหรับการส่งข้ อมูล ส่วน button ไว้ สาหรับ
สั่งงานใดๆ
ผลทีไ่ ด้
Reset
 ใช้ ในการยกเลิกการป้ อนข้ อมูลที่อยู่ในฟอร์มทั้งหมด ผลที่ได้ ข้อมูล
ที่ป้อนไปแล้ วจะ
 หายไปหมดมีรป
ู แบบคาสั่งดังนี้
 <FORM method=วิธกี ารส่งข้ อมูล action=ชื่อไฟล์ท่จี ะมา
รับข้ อมูล>
<INPUT TYPE="RESET" VALUE="ข้ อความที่แสดงผล
บนปุ่ ม" >
</FORM>
ตัวอย่างการใช้ Reset
 <FORM action=showform.php method=post >
<INPUT TYPE="RESET" VALUE="DEL" >
</FORM>
ผลทีไ่ ด้