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

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

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

20 July FORM FORM เป็นรูปแบบการรับข้อมูลและ แสดงผล ช่วยให้ผู้ใช้เกิดความสะดวก ในการใช้งานบน Web page  ให้มีช่องว่างสำหรับผู้ใช้กรอกข้อความ หรือ  ให้ทำเครื่องหมายเลือกตามต้องการ หรือ  ให้รับการตกลงใจ หรือ  ให้ยกเลิกการป้อนข้อมูล ฯลฯ

20 July การสร้าง FORM  ใช้ tag … ใน เอกสาร HTML เพี่อ กำหนดให้มีการ สร้าง FORM  tags ต่างๆ ต่อไปนี้ใช้ประกอบกัน สร้างฟอร์ม และต้องอยู่ภายใน tag … Tag Tag …

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

20 July Tag  Tag ใช้สร้างรูปแบบนำ ข้อมูลเข้า และมี attribute TYPE เพื่อ บอกรูปแบบข้อมูลแบบต่างๆ ต่อไปนี้ - TEXT - PASSWORD - RADIO - CHECKBOX - SUBMIT - RESET - BUTTON

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

20 July ตัวอย่างแบบข้อมูลชนิด TEXT

20 July แบบข้อมูลชนิด PASSWORD  PASSWORD เป็นรูปแบบรับข้อมูล คล้าย TEXT แต่จะแสดงเป็น เครื่องหมาย * เมื่อพิมพ์ข้อมูล  ตัวอย่าง

20 July รูปแบบข้อมูลชนิด RADIO  RADIO เป็นปุ่มกลมคล้ายปุ่มบน หน้าปัดวิทยุ ใช้รับข้อมูลโดย เลือก หรือไม่เลือกเพียงกรณีเดียว เมื่อเลือก จะเป็นจุดดำ ใช้ร่วมกับ attribute ต่อไปนี้  NAME เหมือน TEXT  CHECKED เมี่อต้องการให้เป็น default

20 July ตัวอย่างรูปแบบข้อมูลชนิด RADIO  <INPUT TYPE = RADIO NAME = sex VALUE=M> Gentleman  <INPUT TYPE = RADIO NAME = sex VALUE=M> Lady

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

20 July ตัวอย่างแบบข้อมูลชนิด CHECKBOX Banana Choice Mango Choice Apple Choice

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

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

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

20 July รูปแบบ SELECT item 1 item 2 : item n

20 July Attribute ของ SELECT  NAME=fieldname เป็นการกำหนดชื่อ ฟิลด์ที่ใช้เก็บข้อมูล  MULTIPLE ช่วยให้มี scroll bar เมื่อ มีรายการเลือก มากกว่า 4 บรรทัด  SIZE = n ใช้กำหนดจำนวนบรรทัด รายการเลือก ให้ เท่ากับ n ที่ เหลือใช้ scroll bar

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

20 July The End