HTML FROM

Download Report

Transcript HTML FROM 

HTML FORM
FORM
การใช้ฟอร์มบน internet มีไว้เพื่อเก็บข้อมูลบนเว็บ และเป็ นการติดต่อ
ระหว่างผูเ้ ข้าเยีย่ มชมเว็บและเจ้าของเว็บ นอกจากนั้นยังนิยมใช้ฟอร์ม เพื่อรับการ
สัง่ ซื้ อ การกรอกแบบสอบถาม ในระบบการค้าอิเล็กทรอนิกส์อีกด้วย
1. คำสั่ งหลักในกำรสร้ ำงฟอร์ ม
คาสัง่ ที่ใช้ในการสร้างฟอร์มรับและส่ งข้อมูลต่าง ๆ กับเว็บเซิร์ฟเวอร์ ประกอบด้วยแท็กต่อไปนี้
<form> .. </form>
เป็ นการกาหนดให้โปรแกรมบราวเซอร์ทาการสร้างแบบฟอร์ม
<input>
การกาหนดรู ปแบบข้อมูลที่จะกรอกลงบนฟอร์ม ประกอบด้วยการป้ อนข้อมูล
แบบบรรทัดเดียว (textbox) ปุ่ มแบบวิทยุ (radio button) ช่องทาเครื่ องหมาย (checkbox) ปุ่ มยืนยันข้อมูล
และปุ่ มยกเลิกข้อมูล
<select>.. </select>
<textarea> .. </textarea>
มาก (multiple lines)
เป็ นการสร้างดรอปดาวน์เมนู แสดงตัวเลือกทั้งหมด
เป็ นการสร้างเท็กซ์บอกซ์แบบมีแถบเลื่อน สาหรับพิมพ์ขอ้ มูลจานวน
2. คำสั่ งในกำรสร้ ำงฟอร์ ม
มีรูปแบบดังนี้
<form action= “ตาแหน่งCGI” method= “วิธีการส่ งข้อมูล” >…<form>
โดยที่
o action เป็ นคาสั่งที่ระบุโปรแกรมบนเซิ ร์ฟเวอร์ โดยระบุตาแหน่งของURL และ CGI Script
ใช้ระบุวา่ หลังจากกด Submit ข้อมูลทั้งหมดที่ input อยูใ่ น form จะส่ งไปที่ Web Page
ที่ระบุไว้หลัง action=
o method เป็ นวิธีการส่ งข้อมูลของแบบฟอร์ มไปยังเซิ ร์ฟเวอร์ มี 2 วิธี คือ
- GETหมายถึงการส่ งข้อมูลรวมเข้าไปกับ URL ด้วย ซึ่ งจะทาให้ตวั แปรและข้อมูลที่กรอกในแบบฟอร์มแสดง
ต่อท้าย URL ที่ตอ้ งการส่ งข้อมูลไป โดยจะสามารถมองเห็นข้อมูลเหล่านั้นปรากฏในช่อง Address ของเบราเซอร์
เช่น http://www.myweb.com/get.php?name=“Anothai”&age=30
- POST หมายถึง เป็ นการที่ไม่ได้ส่งข้อมูลร่ วมไปกับ URL ทาให้มองไม่เห็นข้อมูลที่ส่งไป และสามารถ
รองรับปริ มาณการส่ งข้อมูลได้มากกว่า และมีความปลอดภัยมากกว่า
3. คำสั่ งกำหนดรูปแบบในกำรรับข้ อมูลด้ วยแท็ก<input>
รู ปแบบของการรับข้อมูลมีดงั นี้
1) Text เป็ นการรับข้อมูลแบบข้อความสั้น ๆ
2) Checkbox เป็ นการรับข้อมูลแบบมีทางเลือกที่เลือกได้มากกว่าหนึ่งตัวเลือก
3) Radio Buttons เป็ นการรับข้อมูลโดยแสดงทางเลือกให้ผใู ้ ช้เลือกได้เพียงหนึ่งตัวเลือก
4) Action Buttons เป็ นปุ่ มที่จะปฏิบตั ิงานทันที ซึ่งจะมีผลทั้งฟอร์ม ประกอบด้วย
Submit เป็ นปุ่ มที่ส่งข้อมูลไปยังเซิร์ฟเวอร์
Reset เป็ นปุ่ มสาหรับลบข้อมูลในฟอร์ม
Custom Image เป็ นภาพที่สามารถคลิกได้
5) Password เป็ นการรับข้อมูล โดยการแสดงผลจะแสดงเครื่ องหมาย  ตามจานวนอักษรที่พิมพ์
6) Hidden Field เป็ นการรับข้อมูลที่ซ่อนจากการมองเห็น
4. กำรรับข้ อมูลแบบข้ อควำมสั้ น (text)
จะเป็ นการรับข้อมูลผ่านกล่องสี่ เหลี่ยมที่เรี ยกว่าtextbox โดยมีรูปแบบดังนี้
<input type=“text” size=“ความยาวของกล่อง” name=“ชื่อของข้อมูล” maxlength=“ความยาวสูงสุ ด”
value= “ข้อความ”>
โดยที่
o type=“text” เป็ นการกาหนดรู ปแบบการรับข้อมูลแบบข้อความ
o size
เป็ นการกาหนดขนาดของกล่องที่รับข้อความ
o name
เป็ นการตั้งชื่อให้กบั กล่อง หรื อเป็ นชื่อของข้อมูลในกล่องนัน่ เอง เพื่อส่ งให้กบั
โปรแกรม CGI ในเซิร์ฟเวอร์ (Page ที่ระบุไว้หลัง action= สามารถอ้างอิงname ได้)
o maxlength เป็ นการกาหนดขนาดหรื อจานวนตัวอักษรสูงสุ ดที่จะรับได้
o value
เป็ นการกาหนดข้อความที่จะให้ปรากฏอยูใ่ นกล่องรับข้อความในตอนเริ่ มต้น ถือเป็ นค่า
ปริ ยาย(default)
ตัวอย่ ำงที่ 1 (index1.html)
<html>
<body>
<h1> กรุ ณากรอกชื่อและที่อยู่ </h1>
<form method= “post” action= “addAct.php”>
<b> ชื่อ: </b>
<input type= “text” name= “fname” size=“20”>
<b>นามสกุล: </b>
<input type= “text” name= “lname” size=“20”>
<b>ที่อยู:่ </b>
<input type= “text” name= “address” size=“40”>
<b>ประเทศ: </b>
<input type= “text” name= “country” size=“10”>
<b> เบอร์โทรศัพท์: </b> <input type= “text” name= “tel” size=“15”>
</form>
</body>
</html>
<br>
<br>
<br>
<br>
5. กำรรับข้ อมูลแบบ Password
การกาหนดรู ปแบบข้อมูลแบบนี้มีไว้เพื่อรักษาความปลอดภัยของข้อมูล มีรูปแบบคือ
<input
type=“password”
size=“ความยาวของกล่อง”
name=“ชื่อของข้อมูล”
maxlength=“ความยาวสูงสุ ด”>
โดยที่
o type=“password” เป็ นการกาหนดรู ปแบบการรับข้อมูลแบบพาสเวิร์ด
o size
เป็ นการกาหนดขนาดของกล่องที่รับข้อความ
o name
เป็ นการตั้งชื่อให้กบั กล่อง หรื อเป็ นชื่อของข้อมูลในกล่องนัน่ เอง
o maxlength
เป็ นการกาหนดขนาดหรื อจานวนตัวอักษรสู งสุ ดที่จะรับได้
ตัวอย่ ำงที่ 2 (index2.html)
<html>
<body>
<form method= “post” action= “passaction.php”>
<b>รหัสผูใ้ ช้</b> <input type= “text” size=“20” name= “username” >
<br>
<b>รหัสผ่าน</b> <input type= “password” size=“10” name= “upassword” >
</form>
</body>
</html>
6. กำรรับข้ อมูลจำกป่ ุมเรดิโอ (Radio buttons)
ข้อมูลแบบเรดิโอ มีไว้สาหรับข้อมูลที่ให้เลือกอันใดอันหนึ่ง จากตัวเลือกหลายตัวเลือก เช่น
ข้อมูลเพศ ที่จะเลือกว่าเป็ นเพศชายหรื อเพศหญิง มีรูปแบบดังนี้
<input type=“radio” name=“ชื่อของข้อมูล” value= “ข้อความ” checked>
โดยที่
o type=“radio” เป็ นการกาหนดรู ปแบบการรับข้อมูลโดยแสดงวงกลมโปร่ ง
เพื่อให้เลือกทางใดทางหนึ่ง
o name
เป็ นการตั้งชื่อให้กบั กลุ่มของเรดิโอดังนั้นเรดิโอในกลุ่มเดียวกันจะมี name เหมือนกัน
o value
เป็ นการกาหนดค่าของข้อมูล เมื่อมีการคลิกเลือกที่เรดิโอปุ่ มนี้
o checked เป็ นการกาหนดให้แสดงการเลือกไว้ล่วงหน้า แต่ผใู ้ ช้สามารถเปลี่ยนแปลงภายหลังได้
ตัวอย่ ำงที่ 3 (index3.html)
<html>
<body>
<form method= “post” action= “formaction.php”>
เพศ <input type= “radio” name= “gender” value= “female” checked>
หญิง <input type= “radio” name= “gender” value= “male”> ชาย
</form>
</body>
</html>
Note:name สาหรับแต่ละกลุ่มของ radio button ควรจะเป็ นชื่อตัวแปรเดียวกัน
7. กำรรับข้ อมูลจำกเช็คบอกซ์ (Checkbox)
ข้อมูลแบบเช็คบอกซ์ มีไว้สาหรับข้อมูลแบบทางเลือกที่ให้เลือกได้หลายตัวเลือก เช่น ข้อมูลงาน
อดิเรก ที่จะเลือกว่าเป็ นอ่านหนังสื อ ดูหนัง ปลูกต้นไม้ หรื อสะสมแสตมป์ เป็ นต้น มีรูปแบบดังนี้
<input type=“checkbox” name=“ชื่อของข้อมูล” value= “ข้อความ” checked>
โดยที่
o type= “checkbox” เป็ นการกาหนดรู ปแบบการรับข้อมูลโดยแสดงสี่ เหลี่ยมโปร่ ง
เพื่อให้เลือกได้หลายตัวเลือก
o name
เป็ นการตั้งชื่อให้กบั เช็คบอกซ์ชิ้นนี้
o value
เป็ นการกาหนดค่าของข้อมูล เมื่อมีการคลิกเลือกที่เช็คบอกซ์น้ ี
o checked เป็ นการกาหนดให้แสดงการเลือกไว้ล่วงหน้า แต่ผใู ้ ช้สามารถเปลี่ยนแปลงภายหลังได้
ตัวอย่ ำงที่ 4 (index4.html)
<html>
<body>
<form method= “post” action= “formaction2.php”>
<h2>งำนอดิเรก </h2>
<input type= “checkbox” name= “swim” value= “s” checked> ว่ ำยน้ ำ <br>
<input type= “checkbox” name= “bowling” value= “b” checked> โบว์ ลงิ <br>
<input type= “checkbox” name= “tennis” value= “t”> เทนนิส
<br>
<input type= “checkbox” name= “football” value= “f”> ฟุตบอล
</form>
</body>
</html>
8. กำรรับข้ อมูลจำกรำยกำรเลือกแบบดร็อปดำวน์ เมนู (Select)
เป็ นการนาข้อมูลเข้าแบบมีเมนูให้เลือกตัวเลือก มีรูปแบบดังนี้
<select name=“ชื่อของข้อมูล” size= “จานวนบรรทัด”>
<option value= “ข้อความ”> ตัวเลือกตัวที่ 1
<option value= “ข้อความ”> ตัวเลือกตัวที่ 2
<option value= “ข้อความ”> ตัวเลือกตัวที่ 3
<option value= “ข้อความ”> ตัวเลือกตัวที่ n
</select>
โดยที่
o name เป็ นการตั้งชื่อให้กบั ดร็ อปดาวน์เมนู ชิ้นนี้
o size เป็ นการกาหนดจานวนบรรทัดที่จะให้แสดงตัวเลือก
o value เป็ นการกาหนดค่าของข้อมูล เมื่อมีการเลือกที่ตวั เลือกนั้น ๆ
ตัวอย่ ำงที่ 5 (index5.html)
<html>
<body>
</form>
</body>
</html>
<form method= “post” action= “selectact.php”>
<b>ตำแหน่ งงำนที่ต้องกำรสมัคร </b> <br>
<select name= “position” size= “1”>
<option value= “1” > ผู้จดั กำรฝ่ ำยกำรตลำด
<option value= “2”> ผู้จดั กำรทั่วไป
<option value= “3” > วิศวกร
<option value= “4” > เลขำนุกำร
</select> <br><br>
<b>กำรศึกษำสู งสุ ด </b> <br>
<select name= “education” size= “3”>
<option value= “1” > ปริญญำเอก
<option value= “2”> ปริญญำโท
<option value= “3” > ปริญญำตรี
</select>
สามารถทาให้เลือกหลายๆค่าได้
โดยใส่ multiple=“multiple”ไว้ใน select tag
9. กำรรับข้ อมูลแบบข้ อควำมจำนวนมำก (Textarea)
จะเป็ นการรับข้อมูลผ่านกล่องสี่ เหลี่ยมที่เรี ยกว่า textarea ซึ่งจะมีแถบเลื่อนให้สามารถพิมพ์
ข้อมูลได้หลายบรรทัด เช่น การรับข้อมูลคาแนะนา เป็ นต้น โดยมีรูปแบบดังนี้
<textarea name=“ชื่อของข้อมูล” rows=“จานวนบรรทัด” cols=“ความกว้าง” >
ข้อความที่ตอ้ งการให้ปรากฏในกล่อง
</textarea>
โดยที่
o name
เป็ นการตั้งชื่อให้กบั กล่อง textarea หรื อเป็ นชื่อของข้อมูลในกล่องนัน่ เอง
o rows
เป็ นการกาหนดจานวนบรรทัดของกล่องที่จะรับข้อมูล
o cols
เป็ นการกาหนดจานวนคอลัมภ์ซ่ ึงเป็ นความกว้างของกล่องที่จะรับข้อมูล
ตัวอย่ ำงที่ 6 (index6.html)
<html>
<body>
<form method= “post” action= “exp.php”>
<h2> ประสบกำรณ์ กำรทำงำน </h2>
<textarea name= “experience” cols= “40” rows= “10”>
กรอกตรงนี้
</textarea>
</form>
</body>
</html>
10. กำรกำหนดปุ่ มแบบซับมิท (Submit)
ปุ่ ม Submit จะใช้สาหรับคลิกเพื่อทาการส่ งข้อมูลออกจากฟอร์ มผ่านเบราเซอร์
ไปยังเซิร์ฟเวอร์ โดยมีรูปแบบดังนี้
<input type= “submit” value= “ข้อความที่ปรากฏบนปุ่ ม”>
โดยที่
o type= “submit” เป็ นการสร้างปุ่ มแบบsubmit
o value
เป็ นการกาหนดข้อความที่ตอ้ งการให้ปรากฏบนปุ่ ม
10. กำรกำหนดปุ่ มแบบรีเซต (Reset)
ปุ่ ม Reset จะใช้สาหรับคลิกเพื่อล้างข้อมูลในฟอร์ม โดยมีรูปแบบดังนี้
<input type= “reset”” value= “ข้อความที่ปรากฏบนปุ่ ม”>
โดยที่
o type= “reset”
o value
เป็ นการสร้างปุ่ มแบบreset
เป็ นการกาหนดข้อความที่ตอ้ งการให้ปรากฏบนปุ่ ม
ตัวอย่ ำงที่ 7 (index7.html)
<html>
<body>
<form method= “post” action= “myform.php”>
<input type= “submit” value= “บันทึก”>
<input type= “reset” value= “ยกเลิก”>
</form>
</body>
</html>
ตัวอย่ ำงที่ 8 (index8.html)
ตัวอย่ ำงที่ 8
<html>
<body>
<h2>แบบฟอร์ มสมัครเข้ ำรับรำชกำร</h2> <br> กรุณำกรอกแบบฟอร์ มให้ สมบูรณ์ <br>
<form name="myform" method="post" action="apply.php">
ชื่อ
<inputtype="text"name="fname" >
นำมสกุล <inputtype="text"name="lname"> <br>
เพศ
<inputtype="radio"name="sex" value="male" checked> ชำย
<input type="radio"name="sex" value="female">
หญิง
ระดับกำรศึกษำ
<selectname="education">
<optionvalue="1"> ปริญญำตรี
<optionvalue="2"> ปริญญำโท
<optionvalue="3"> ปริญญำเอก
</select> <br>
<br>
ตัวอย่ ำงที่ 8
ควำมสำมำรถทำงภำษำ
<input type="checkbox"name="eng" value="e" checked> อังกฤษ
<input type="checkbox"name="china" value="c"> จีน
<input type="checkbox"name="japan" value="j"> ญี่ปุ่น
<input type="checkbox" name="france" value="f"> ฝรั่งเศส <br>
ประสบกำรณ์ กำรทำงำน
<textareaname="experience"></textarea> <br>
<input type="submit"name="button1" value="สมัคร">
<input type="reset"name="button2" value="เคลียร์ " />
</form>
</body>
</html>