E-mail : kantima@www.sci.buu.ac.th FORM อ.กันทิมา อ่อนละออ E-mail : kantima@www.sci.buu.ac.th E-mail:kantima@www.sci.buu.ac.th E-mail:kantima@www.sci.buu.ac.th

FORM HTML Form เป็นลักษณะของระบบการสอบถามข้อมูลแบบหนึ่งที่ใช้ในระบบเครือข่ายอินเทอร์เน็ต/อินทราเน็ต/เอกทราเน็ต รูปแบบ <FORM METHOD=“methodname” ACTION=“URLsname”> ข้อความและฟิลด์ของฟอร์ม …… </FORM> E-mail:kantima@www.sci.buu.ac.th

การสร้างแบบฟอร์ม การใช้งาน Form ที่สร้างขึ้นนั้นจะใช้ร่วมกับโปรแกรมย่อยๆ หรือ Script ที่เรียกว่า Common Gateway Interface(CGI) CGI เป็นโปแกรมตัวกลางที่ทำหน้าที่เชื่อโยงข้อมูลระหว่างเครื่องคอมพิวเตอร์ของผู้ใช้กับเครื่อง Server โดย Server สามารถรวบรวมข้อมูลที่ผู้ใช้ป้อนมาให้เพื่อประมวลผล เมื่อเสร็จแล้วก็สามารถส่งผลลัพธ์กลับไปยังผู้ใช้ E-mail:kantima@www.sci.buu.ac.th

ตัวเลือกที่ใช้ในร่วมกับแท็ก Form METHOD = “GET หรือ POST ” ใช้บอก Browser ว่าจะส่งข้อมูลไปที่ Server ด้วยวิธีใด - GET เป็นการนำข้อมูลไปต่อท้ายสุดแล้วประมวลผลครั้งเดียว - POST จะนำข้อมูลส่งไปที่ serverแยกกันไปเป็นแต่ละ transaction ACTION = “URLsname”> ใช้ระบุURL ของ CGI script ที่เรียกมาใช้งาน ENCRYPT ใช้สำหรับเข้ารหัส โดยระบุเป็น MINE Type E-mail:kantima@www.sci.buu.ac.th

คำสั่ง INPUT เป็นคำสั่งที่ใช้รับข้อมูลในการรับข้อมูลในฟอร์มโดยการสร้างปุ่ม หรือตัวเช็คหรือช่องกรอกข้อความ ตาม attribute ของ TYPE รูปแบบ <INPUT TYPE=ชนิดการรับข้อมูล NAME=“ชื่อตัวแปร“ [ตัวเลือกเพิ่มเติม]> TYPE ใช้บอกชนิดของข้อมูลนำเข้าประกอบด้วย TEXT, PASSWORD, CHECKBOX, RADIO, SUBMIT, RESET ตัวเลือกเพิ่มเติมมีดังนี้ ALIGN, CHECKED, ROWS, COLS, SIZE, MAXLENGTH, SRC, VALUE E-mail:kantima@www.sci.buu.ac.th

แบบข้อมูลชนิด TEXT เป็นแบบข้อมูลที่ผู้ใช้ป้อนข้อความลงในช่องรับข้อมูลเพียงบรรทัดเดียว มีตัวเลือกที่ใช้ร่วมกับคำสั่งคือ SIZE ใช้กำหนดขนาดของช่องรับข้อมูล NAME ใช้กำหนดชื่อข้อมูล (ตัวแปร) ที่ใช้เก็บข้อมูล VALUE ใช้บอกค่าที่กำหนดไว้แล้ว ถ้าไม่ป้อนค่าเข้ามาจะถือว่าเป็น default ตัวอย่าง <INPUT TYPE=TEXT NAME = “fNAME” SIZE = 40> E-mail:kantima@www.sci.buu.ac.th

ข้อมูลแบบ TYPE=PASSWORD เป็นรูปแบบรับข้อมูลคล้าย Text แต่จะแสดงเป็นเครื่องหมาย “*” ขณะพิมพ์ข้อมูล ตัวอย่าง <INPUT TYPE= PASSWORD SIZE = 8 NAME = mycode> E-mail:kantima@www.sci.buu.ac.th

ตัวอย่างการใช้ INPUT Enter text:<INPUT TYPE=TEXT NAME=“NAME” SIZE=25><p> Enter password :<INPUT TYPE=PASSWORD NAME=“PASSWORD” SIZE=8 MAXLENGTH=8> แสดงผลดังนี้ Enter text: Enter password : Seree ******** E-mail:kantima@www.sci.buu.ac.th

รูปแบบข้อมูลแบบ RADIO RADIO BUTTON เป็นปุ่มกลม เป็นรูปแบบการรับข้อมูลที่กำหนดให้ผู้ใช้เลือกตัวเลือกเพียงอย่างเดียว เมื่อเลือกจะเป็นจุดดำ ตัวเลือก CHECKED เป็นการกำหนดให้รายการนั้นเป็นค่าปริยาย E-mail:kantima@www.sci.buu.ac.th

ตัวอย่างการใช้ radio button Please choose one of the following :<p> <INPUT TYPE = RADIO NAME = “sex” VALUE=“Male”> Male <BR> VALUE=“Female”>Female <BR> E-mail:kantima@www.sci.buu.ac.th

แบบข้อมูลชนิด CHECKBOX เป็นรูปแบบการเลือกที่ผู้ใช้เลือกตัวเลือกได้มากกว่า 1 รายการ VALUE เป็น attribute ที่กำหนดค่าให้แต่ละตัวเลือกที่ผู้ใช้เลือก ชื่อตัวแปรที่ใช้เก็บค่าจะต้องแตกต่างกัน ตัวเลือก CHECKED เป็นการกำหนดให้รายการนั้นเป็นค่าปริยาย E-mail:kantima@www.sci.buu.ac.th

ตัวอย่างการใช้ checkbox <INPUT TYPE=CHECKBOX NAME = “FRUIT1” VALUE = “MANGO”> Mango <BR> <INPUT TYPE=CHECKBOX NAME = “FRUIT2” VALUE = “ORANGE”> Orange <BR> <INPUT TYPE=CHECKBOX NAME = “FRUIT3” VALUE = “BANANA”> Banana <BR> <INPUT TYPE=CHECKBOX NAME = “FRUIT4” VALUE = “DURAIN”> Durain <BR> E-mail:kantima@www.sci.buu.ac.th

ปุ่ม SUBMIT ใช้สำหรับส่งข้อมูลที่กรอกหรือเลือกในแบบฟอร์มไปยัง Server รูปแบบ <INPUT TYPE = “SUBMIT” Name = “message”> เมื่อ message คือข้อความที่ปรากฏบนปุ่มเลือก E-mail:kantima@www.sci.buu.ac.th

ปุ่ม RESET เป็นปุ่มที่ใช้กดสำหรับยกเลิกรายการที่ป้อนเข้าไปทั้งหมด ให้กับไปใช้ค่าเริ่มต้นใหม่ รูปแบบ <INPUT TYPE = “RESET” Name = “message” > เมื่อ message คือข้อความที่ปรากฏบนปุ่ม RESET E-mail:kantima@www.sci.buu.ac.th

การใช้ปุ่ม submit และ reset <INPUT TYPE = SUBMIT VALUE =“Sent Form”> <INPUT TYPE = RESET VALUE =“Cancel Form”> แสดงผลดังนี้ Send Form Cancel Form E-mail:kantima@www.sci.buu.ac.th

TEXTAREA เป็นการรับข้อความหลายบรรทัด (Multiline text input)ในบริเวณที่กำหนดไว้ รูปแบบ <TEXTAREA NAME = “ชื่อตัวแปร“ ROWS = จำนวนบรรทัด COLS = จำนวนคอลัมน์> ข้อความ </TEXTAREA> ตัวแปรแทนชื่อพื้นที่ที่เรากำหนด E-mail:kantima@www.sci.buu.ac.th

ตัวอย่าง Please enter any comments here <p> <TEXTAREA NAME = “comments” ROWS=8 COLS=60> This is comments </TEXTAREA> E-mail:kantima@www.sci.buu.ac.th

การใช้ SELECT และ OPTIONS SELECT เป็นการแสดงตัวเลือกทั้งหมดให้ผู้ใช้เลือกโดยอาจแสดงในรูปของ Drop-down list หรือแสดงตัวเลือกตามปกติ รูปแบบ <SELECT NAME = “ชื่อตัวแปร“> <OPTION [VALUE = “ข้อมูล“ ] >ข้อความ ………….. </SELECT> E-mail:kantima@www.sci.buu.ac.th

ตัวอย่าง <FORM> <SELECT NAME = “sport” > <OPTION VALUE = “tennis”> Tennis <OPTION VALUE = “basketball”>Basketball <OPTION VALUE = “football”>Football <OPTION VALUE = “volleyball”>volleyball </SELECT> </FORM> E-mail:kantima@www.sci.buu.ac.th

การใช้ MULTIPLE สามารถใช้MULTIPLE เพื่อแสดงผลลัพธ์ตัวเลือกทั้งหมด โดยไม่ต้องคลิกที่ลูกศรเลื่อนแสดง <FORM> <SELECT NAME = “sport” MULTIPLE > <OPTION VALUE = “tennis”> Tennis <OPTION VALUE = “basketball”>Basketball <OPTION VALUE = “football”>Football <OPTION VALUE = “volleyball”>volleyball </SELECT> </FORM> E-mail:kantima@www.sci.buu.ac.th

การใช้ SIZE กำหนดจำนวนตัวเลือก SIZE ใช้แสดงจำนวนตัวเลือกที่ต้องการให้เห็นใน drop-down lists <FORM> <SELECT NAME = “sport” SIZE = 3 > <OPTION VALUE = “tennis”> Tennis <OPTION VALUE = “basketball”>Basketball <OPTION VALUE = “football”>Football <OPTION VALUE = “volleyball”>volleyball </SELECT> </FORM> E-mail:kantima@www.sci.buu.ac.th

คำถาม ? E-mail:kantima@www.sci.buu.ac.th