เอกสารประกอบการบรรยาย เรื่อง การเขียน Home page ด้วย HTML (2) ตอน... การใช้ FORM โดย ผู้ช่วยศาสตราจารย์วิชัย บุญเจือ

งานนำเสนอเรื่อง: "เอกสารประกอบการบรรยาย เรื่อง การเขียน Home page ด้วย HTML (2) ตอน... การใช้ FORM โดย ผู้ช่วยศาสตราจารย์วิชัย บุญเจือ"— ใบสำเนางานนำเสนอ:

1 เอกสารประกอบการบรรยาย เรื่อง การเขียน Home page ด้วย HTML (2) ตอน... การใช้ FORM โดย ผู้ช่วยศาสตราจารย์วิชัย บุญเจือ E-mail:wichai@buu.ac.th http://bucc4.buu.ac.th/~wichai

2 20 July 2003E-mail:wichai@buu.ac.th2 การประมวลผลใน WWW  ผู้ใช้งานสามารถรับข้อมูลทางจอภาพ แล้วส่งข้อมูลมายัง server เพื่อ ประมวลผลหรือจัดเก็บ  การจัดส่งข้อมูลและการประมวลผล ทำ โดยใช้โปรแกรม CGI ที่ server หรือ เขียน script แทรกในไฟล์ HTML  เมื่อประมวลผลเสร็จ ก็ส่งกลับไปให้ผู้ใช้ ผ่านทาง Browser  การรับข้อมูลและแสดงผล ใช้การสร้าง FORM ในไฟล์ HTML

3 20 July 2003E-mail:wichai@buu.ac.th3 Common Gateway Interface (CGI)  CGI เป็นโปรแกรมทำหน้าที่เสริม ให้กับโปรแกรม Browser ในการติดต่อ รับส่งข้อมูลระหว่าง Client กับ Server และ เพื่อประมวลผลหรือจัดเก็บที่ Server  ปกติจะเขียนโปรแกรม CGI ด้วยภาษา เฉพาะ เช่น Perl หรือ JAVA หรือ ใช้ ภาษาระดับสูง C++, Pascal, Visual Basic แล้ว Compile เป็น.EXE เก็บไว้ ที่ Server

4 20 July 2003E-mail:wichai@buu.ac.th4 FORM FORM เป็นรูปแบบการรับข้อมูลและ แสดงผล ช่วยให้ผู้ใช้เกิดความสะดวก ในการใช้งานบน Web page  ให้มีช่องว่างสำหรับผู้ใช้กรอกข้อความ หรือ  ให้ทำเครื่องหมายเลือกตามต้องการ หรือ  ให้รับการตกลงใจ หรือ  ให้ยกเลิกการป้อนข้อมูล ฯลฯ

5 20 July 2003E-mail:wichai@buu.ac.th5 การสร้าง FORM  ใช้ tag … ใน เอกสาร HTML เพี่อ กำหนดให้มีการ สร้าง FORM  tags ต่างๆ ต่อไปนี้ใช้ประกอบกัน สร้างฟอร์ม และต้องอยู่ภายใน tag … Tag Tag …

6 20 July 2003E-mail:wichai@buu.ac.th6 Attribute ของ Tag Tag มี attribute ต่อไปนี้  NAME = form-name เป็นการระบุชื่อ ฟอร์ม  METHOD = POST/GET เพี่อระบุวิธี รับข้อมูล  ACTION = “file-name” เป็นการระบุ ที่เก็บโปรแกรม CGI บน server  ตัวอย่าง

7 20 July 2003E-mail:wichai@buu.ac.th7 Tag  Tag ใช้สร้างรูปแบบนำ ข้อมูลเข้า และมี attribute TYPE เพื่อ บอกรูปแบบข้อมูลแบบต่างๆ ต่อไปนี้ - TEXT - PASSWORD - RADIO - CHECKBOX - SUBMIT - RESET - BUTTON

8 20 July 2003E-mail:wichai@buu.ac.th8 แบบข้อมูลชนิด TEXT  TEXT เป็นแบบที่ผู้ใช้ป้อนข้อความ ลงในช่องรับข้อมูล ใช้ร่วมกับ attribute ต่อไปนี้  SIZE = n1 ใช้กำหนดขนาดของช่อง รับข้อมูล  NAME = fieldname ใช้กำหนดชื่อ ข้อมูล ( ตัวแปร ) ที่ใช้เก็บข้อมูล  MAXLENGTH = n2 ใช้กำหนดความ ยาวสูงสุดของข้อมูลที่จะรับเข้า  VALUE = message ใช้บอกค่าที่ กำหนดไว้แล้ว ถ้าไม่ป้อนค่าเข้ามาจะ ถือว่าเป็น default

9 20 July 2003E-mail:wichai@buu.ac.th9 ตัวอย่างแบบข้อมูลชนิด TEXT

10 20 July 2003E-mail:wichai@buu.ac.th10 แบบข้อมูลชนิด PASSWORD  PASSWORD เป็นรูปแบบรับข้อมูล คล้าย TEXT แต่จะแสดงเป็น เครื่องหมาย * เมื่อพิมพ์ข้อมูล  ตัวอย่าง

11 20 July 2003E-mail:wichai@buu.ac.th11 รูปแบบข้อมูลชนิด RADIO  RADIO เป็นปุ่มกลมคล้ายปุ่มบน หน้าปัดวิทยุ ใช้รับข้อมูลโดย เลือก หรือไม่เลือกเพียงกรณีเดียว เมื่อเลือก จะเป็นจุดดำ ใช้ร่วมกับ attribute ต่อไปนี้  NAME เหมือน TEXT  CHECKED เมี่อต้องการให้เป็น default

12 20 July 2003E-mail:wichai@buu.ac.th12 ตัวอย่างรูปแบบข้อมูลชนิด RADIO  <INPUT TYPE = RADIO NAME = sex VALUE=M> Gentleman  <INPUT TYPE = RADIO NAME = sex VALUE=M> Lady

13 20 July 2003E-mail:wichai@buu.ac.th13 แบบข้อมูลชนิด CHECKBOX  CHECKBOX เป็นรูปแบบที่ผู้ใช้เลือก ตัวเลือกได้มากกว่า 1 รายการ ใช้ ร่วมกับ attribute ต่อไปนี้  NAME = field-name  VALUE = “ ข้อความ “ เป็นการ กำหนดค่าให้แต่ละตัวเลือกที่ผู้ใช้เลือก  CHECKED เป็นการแสดง เครื่องหมายการเลือกค่านั้นโดยปริยาย

14 20 July 2003E-mail:wichai@buu.ac.th14 ตัวอย่างแบบข้อมูลชนิด CHECKBOX Banana Choice Mango Choice Apple Choice

15 20 July 2003E-mail:wichai@buu.ac.th15 แบบข้อมูลชนิด SUBMIT  SUBMIT เป็นรูปแบบการรับข้อมูล ทั้งหมดในแบบฟอร์ม โดย Browser จะ สร้างปุ่มให้เอง ใช้เมื่อต้องการส่งข้อมูล ออก ใช้ร่วมกับ attribute ต่อไปนี้  VALUE = “message“ เป็นข้อความ ที่ต้องการให้แสดงบนปุ่ม  ตัวอย่าง

16 20 July 2003E-mail:wichai@buu.ac.th16 แบบข้อมูลชนิด RESET  RESET เป็นรูปแบบการลบข้อมูล ทั้งหมดในแบบฟอร์ม โดย Browser จะ สร้างปุ่มให้เอง ใช้เมื่อต้องการลบข้อมูล ออก ใช้ร่วมกับ attribute ต่อไปนี้  VALUE = “message“ เป็นข้อความ ที่ต้องการให้แสดงบนปุ่ม  ตัวอย่าง

17 20 July 2003E-mail:wichai@buu.ac.th17 SELECT tag  Tag … ใช้ สร้างรูปแบบการรับข้อมูลที่มีรายการให้ เลือก แบบ Pull down menu โดยมี tag OPTION เป็นตัวเลือก  Tag OPTION มี attribute SELECTED ใช้กำหนดค่า default ให้ OPTION เพียงหนึ่งรายการ โดยจะ แสดงแถบสีให้แก่ตัวเลือกที่เป็น SELECTED

18 20 July 2003E-mail:wichai@buu.ac.th18 รูปแบบ SELECT item 1 item 2 : item n

19 20 July 2003E-mail:wichai@buu.ac.th19 Attribute ของ SELECT  NAME=fieldname เป็นการกำหนดชื่อ ฟิลด์ที่ใช้เก็บข้อมูล  MULTIPLE ช่วยให้มี scroll bar เมื่อ มีรายการเลือก มากกว่า 4 บรรทัด  SIZE = n ใช้กำหนดจำนวนบรรทัด รายการเลือก ให้ เท่ากับ n ที่ เหลือใช้ scroll bar

20 20 July 2003E-mail:wichai@buu.ac.th20 Tag TEXTAREA  Tag … ใช้สร้างรูปแบบการรับ ข้อมูลที่ให้ผู้ใช้ป้อนเข้ามาแบบอิสระใน กรอบที่สร้างให้ มี attribute ต่อไปนี้  NAME=fieldname เป็นการกำหนดชื่อ ฟิลด์ที่ใช้เก็บข้อมูล  ROWS = n เป็นจำนวนบรรทัดในกรอบ  COLS = m เป็นจำนวนคอลัมน์ในกรอบ

21 20 July 2003E-mail:wichai@buu.ac.th21 The End