ดาวน์โหลดงานนำเสนอ
งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ
1
E-mail : kantima@www.sci.buu.ac.th
FORM อ.กันทิมา อ่อนละออ
2
FORM HTML Form เป็นลักษณะของระบบการสอบถามข้อมูลแบบหนึ่งที่ใช้ในระบบเครือข่ายอินเทอร์เน็ต/อินทราเน็ต/เอกทราเน็ต รูปแบบ <FORM METHOD=“methodname” ACTION=“URLsname”> ข้อความและฟิลด์ของฟอร์ม …… </FORM>
3
การสร้างแบบฟอร์ม การใช้งาน Form ที่สร้างขึ้นนั้นจะใช้ร่วมกับโปรแกรมย่อยๆ หรือ Script ที่เรียกว่า Common Gateway Interface(CGI) CGI เป็นโปแกรมตัวกลางที่ทำหน้าที่เชื่อโยงข้อมูลระหว่างเครื่องคอมพิวเตอร์ของผู้ใช้กับเครื่อง Server โดย Server สามารถรวบรวมข้อมูลที่ผู้ใช้ป้อนมาให้เพื่อประมวลผล เมื่อเสร็จแล้วก็สามารถส่งผลลัพธ์กลับไปยังผู้ใช้
4
ตัวเลือกที่ใช้ในร่วมกับแท็ก Form
METHOD = “GET หรือ POST ” ใช้บอก Browser ว่าจะส่งข้อมูลไปที่ Server ด้วยวิธีใด - GET เป็นการนำข้อมูลไปต่อท้ายสุดแล้วประมวลผลครั้งเดียว - POST จะนำข้อมูลส่งไปที่ serverแยกกันไปเป็นแต่ละ transaction ACTION = “URLsname”> ใช้ระบุURL ของ CGI script ที่เรียกมาใช้งาน ENCRYPT ใช้สำหรับเข้ารหัส โดยระบุเป็น MINE Type
5
คำสั่ง INPUT เป็นคำสั่งที่ใช้รับข้อมูลในการรับข้อมูลในฟอร์มโดยการสร้างปุ่ม หรือตัวเช็คหรือช่องกรอกข้อความ ตาม attribute ของ TYPE รูปแบบ <INPUT TYPE=ชนิดการรับข้อมูล NAME=“ชื่อตัวแปร“ [ตัวเลือกเพิ่มเติม]> TYPE ใช้บอกชนิดของข้อมูลนำเข้าประกอบด้วย TEXT, PASSWORD, CHECKBOX, RADIO, SUBMIT, RESET ตัวเลือกเพิ่มเติมมีดังนี้ ALIGN, CHECKED, ROWS, COLS, SIZE, MAXLENGTH, SRC, VALUE
6
แบบข้อมูลชนิด TEXT เป็นแบบข้อมูลที่ผู้ใช้ป้อนข้อความลงในช่องรับข้อมูลเพียงบรรทัดเดียว มีตัวเลือกที่ใช้ร่วมกับคำสั่งคือ SIZE ใช้กำหนดขนาดของช่องรับข้อมูล NAME ใช้กำหนดชื่อข้อมูล (ตัวแปร) ที่ใช้เก็บข้อมูล VALUE ใช้บอกค่าที่กำหนดไว้แล้ว ถ้าไม่ป้อนค่าเข้ามาจะถือว่าเป็น default ตัวอย่าง <INPUT TYPE=TEXT NAME = “fNAME” SIZE = 40>
7
ข้อมูลแบบ TYPE=PASSWORD
เป็นรูปแบบรับข้อมูลคล้าย Text แต่จะแสดงเป็นเครื่องหมาย “*” ขณะพิมพ์ข้อมูล ตัวอย่าง <INPUT TYPE= PASSWORD SIZE = 8 NAME = mycode>
8
ตัวอย่างการใช้ 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 ********
9
รูปแบบข้อมูลแบบ RADIO
RADIO BUTTON เป็นปุ่มกลม เป็นรูปแบบการรับข้อมูลที่กำหนดให้ผู้ใช้เลือกตัวเลือกเพียงอย่างเดียว เมื่อเลือกจะเป็นจุดดำ ตัวเลือก CHECKED เป็นการกำหนดให้รายการนั้นเป็นค่าปริยาย
10
ตัวอย่างการใช้ radio button
Please choose one of the following :<p> <INPUT TYPE = RADIO NAME = “sex” VALUE=“Male”> Male <BR> VALUE=“Female”>Female <BR>
11
แบบข้อมูลชนิด CHECKBOX
เป็นรูปแบบการเลือกที่ผู้ใช้เลือกตัวเลือกได้มากกว่า 1 รายการ VALUE เป็น attribute ที่กำหนดค่าให้แต่ละตัวเลือกที่ผู้ใช้เลือก ชื่อตัวแปรที่ใช้เก็บค่าจะต้องแตกต่างกัน ตัวเลือก CHECKED เป็นการกำหนดให้รายการนั้นเป็นค่าปริยาย
12
ตัวอย่างการใช้ 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>
13
ปุ่ม SUBMIT ใช้สำหรับส่งข้อมูลที่กรอกหรือเลือกในแบบฟอร์มไปยัง Server
รูปแบบ <INPUT TYPE = “SUBMIT” Name = “message”> เมื่อ message คือข้อความที่ปรากฏบนปุ่มเลือก
14
ปุ่ม RESET เป็นปุ่มที่ใช้กดสำหรับยกเลิกรายการที่ป้อนเข้าไปทั้งหมด ให้กับไปใช้ค่าเริ่มต้นใหม่ รูปแบบ <INPUT TYPE = “RESET” Name = “message” > เมื่อ message คือข้อความที่ปรากฏบนปุ่ม RESET
15
การใช้ปุ่ม submit และ reset
<INPUT TYPE = SUBMIT VALUE =“Sent Form”> <INPUT TYPE = RESET VALUE =“Cancel Form”> แสดงผลดังนี้ Send Form Cancel Form
16
TEXTAREA เป็นการรับข้อความหลายบรรทัด (Multiline text input)ในบริเวณที่กำหนดไว้ รูปแบบ <TEXTAREA NAME = “ชื่อตัวแปร“ ROWS = จำนวนบรรทัด COLS = จำนวนคอลัมน์> ข้อความ </TEXTAREA> ตัวแปรแทนชื่อพื้นที่ที่เรากำหนด
17
ตัวอย่าง Please enter any comments here <p>
<TEXTAREA NAME = “comments” ROWS=8 COLS=60> This is comments </TEXTAREA>
18
การใช้ SELECT และ OPTIONS
SELECT เป็นการแสดงตัวเลือกทั้งหมดให้ผู้ใช้เลือกโดยอาจแสดงในรูปของ Drop-down list หรือแสดงตัวเลือกตามปกติ รูปแบบ <SELECT NAME = “ชื่อตัวแปร“> <OPTION [VALUE = “ข้อมูล“ ] >ข้อความ ………….. </SELECT>
19
ตัวอย่าง <FORM> <SELECT NAME = “sport” >
<OPTION VALUE = “tennis”> Tennis <OPTION VALUE = “basketball”>Basketball <OPTION VALUE = “football”>Football <OPTION VALUE = “volleyball”>volleyball </SELECT> </FORM>
20
การใช้ 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>
21
การใช้ 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>
22
คำถาม ?
งานนำเสนอที่คล้ายกัน
