การสร้างฟอร์ม(Form) ด้วยภาษา HTML

การสร้างแบบฟอร์ม (Form) HTML Form เป็นลักษณะของระบบการสอบถามข้อมูลแบบหนึ่งที่ใช้ในระบบเครือข่ายอินเทอร์เน็ต รูปแบบ <FORM METHOD=“methodname” ACTION=“URLsname”> ข้อความและฟิลด์ของฟอร์ม …… </FORM>

การสร้างแบบฟอร์ม(2) ฟอร์ม (Form) ใช้ในการรับข้อมูลจากผู้ใช้ และทำงานร่วมกับโปรแกรมย่อยๆ หรือ Script ที่เรียกว่า Common Gateway Interface(CGI) CGI เป็นโปรแกรมตัวกลางที่ทำหน้าที่เชื่อมโยงข้อมูลระหว่างเครื่องคอมพิวเตอร์ของผู้ใช้กับเครื่อง Server โดย Server รวบรวมข้อมูลที่ผู้ใช้ป้อนมา เพื่อประมวลผล เมื่อเสร็จแล้วส่งผลลัพธ์กลับไปยังผู้ใช้

การสร้างแบบฟอร์ม(3) ตัวเลือกที่ใช้ในร่วมกับแท็ก Form METHOD = ”GET” หรือ ”POST” ใช้บอก Browser ว่าจะส่งข้อมูลไปที่ Server ด้วยวิธีใด GET เป็นการนำข้อมูลทั้งหมดในฟอร์มไปต่อท้ายสุดแล้วประมวลผลครั้งเดียว POST จะนำข้อมูลส่งไปที่ server แยกกันไปเป็นแต่ละ transaction ACTION = “URLsname” ใช้ระบุURL ของ CGI script ที่เรียกมาใช้งาน ENCRYPT ใช้สำหรับเข้ารหัส โดยระบุเป็น MINE Type

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

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

คำสั่ง INPUT กับข้อมูลแบบ PASSWORD Password เป็นรูปแบบรับข้อมูลคล้าย Text แต่จะแสดงเป็นเครื่องหมาย “*” ขณะพิมพ์ข้อมูล รูปแบบ ตัวอย่าง <INPUT TYPE=PASSWORD SIZE=8 NAME=“password”> Password : <INPUT TYPE= PASSWORD SIZE = 8 NAME = “mycode”>

ตัวอย่างการใช้ PASSWORD <FORM> Enter text:<INPUT TYPE=TEXT NAME=“NAME” SIZE=25> <BR> Enter password : <INPUT TYPE=PASSWORD NAME=“PASSWORD” SIZE=8 MAXLENGTH=8> </FORM> แสดงผลดังนี้ Enter text: Enter password : uraiwan ********

คำสั่ง INPUT กับข้อมูลแบบ RADIO RADIO BUTTON มีลักษณะ เป็นปุ่มกลม เป็นรูปแบบการรับข้อมูลที่กำหนดให้ผู้ใช้เลือกตัวเลือกเพียงอย่างเดียว เมื่อเลือกจะเป็นจุดดำ ตัวเลือก CHECKED เป็นการกำหนดให้รายการนั้นเป็นค่าปริยาย รูปแบบ <INPUT TYPE= Radio NAME =“rName” VALUE= “rValue> ข้อความ

ตัวอย่างการใช้ radio button <FORM> Please choose one of the following :<p> <INPUT TYPE = RADIO NAME = “sex” VALUE=“Male”> Male <BR> VALUE=“Female”> Female <BR> </FORM>

คำสั่ง INPUT กับแบบข้อมูลชนิด CHECKBOX เป็นรูปแบบการเลือกที่ผู้ใช้เลือกตัวเลือกได้มากกว่า 1 รายการ VALUE เป็น attribute ที่กำหนดค่าให้แต่ละตัวเลือกที่ผู้ใช้เลือก ชื่อตัวแปรที่ใช้เก็บค่าจะต้องแตกต่างกัน ตัวเลือก CHECKED เป็นการกำหนดให้รายการนั้นเป็นค่าปริยาย รูปแบบ <INPUT TYPE= CHECKBOX NAME =“cName” VALUE= “cValue”>

ตัวอย่างการใช้ checkbox <FORM> <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”> Durian <BR> </FORM>

การสร้างปุ่มส่งข้อมูลในแบบฟอร์ม Submit เป็นปุ่มใช้สำหรับส่งข้อมูลที่กรอกหรือเลือกในแบบฟอร์มไปยัง Server รูปแบบ เมื่อ message คือข้อความที่ปรากฏบนปุ่มเลือก <INPUT TYPE = “SUBMIT” Name = “message”>

การสร้างปุ่มยกเลิกข้อมูลในแบบฟอร์ม Reset เป็นปุ่มที่ใช้กดสำหรับยกเลิกข้อมูลที่ป้อนเข้าไปทั้งหมดในแบบฟอร์ม เพื่อให้กับไปใช้ค่าเริ่มต้นใหม่ รูปแบบ เมื่อ message คือข้อความที่ปรากฏบนปุ่ม RESET <INPUT TYPE = “RESET” Name = “message”>

การใช้ปุ่ม submit และ reset <FORM> <INPUT TYPE = SUBMIT VALUE =“Sent Form”> <INPUT TYPE = RESET VALUE =“Cancel Form”> </FORM> แสดงผลดังนี้ Sent Form Cancel Form

TEXTAREA เป็นการรับข้อความหลายบรรทัด (Multiline text input)บนแบบฟอร์มในบริเวณที่กำหนดไว้ รูปแบบ <TEXTAREA NAME = “ชื่อตัวแปร“ ROWS = จำนวนบรรทัด COLS = จำนวนคอลัมน์> ข้อความ </TEXTAREA> ตัวแปรแทนชื่อพื้นที่ที่เรากำหนด

ตัวอย่าง <FORM> Please enter any comments here <p> <TEXTAREA NAME = “comments” ROWS=8 COLS=60> This is comments </TEXTAREA> </FORM>

การสร้าง SELECT BOX SELECT แสดงตัวเลือกทั้งหมดให้ผู้ใช้เลือกโดยอาจแสดงในรูปของ Drop-down list หรือแสดงตัวเลือกตามปกติ รูปแบบ <SELECT NAME = “ชื่อตัวแปร“> <OPTION [VALUE = “ข้อมูล“ ] >ข้อความ … </SELECT>

ตัวอย่าง <FORM> <SELECT NAME = “sport” > <OPTION VALUE = “tennis”> Tennis <OPTION VALUE = “basketball”> Basketball <OPTION VALUE = “football”>Football <OPTION VALUE = “volleyball”>Volleyball </SELECT> </FORM>

การใช้ MULTIPLE ใน SELECTION BOX <FORM> <SELECT NAME = “sport” MULTIPLE > <OPTION VALUE = “tennis”> Tennis <OPTION VALUE = “basketball”>Basketball <OPTION VALUE = “football”>Football <OPTION VALUE = “volleyball”>Volleyball </SELECT> </FORM>

การใช้ 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>

การส่งข้อมูลในแบบฟอร์มด้วย Mailto เราสามารถส่งข้อมูลจากแบบฟอร์มที่เราสร้างขึ้น โดยใช้ไปรษณีย์อีเลก ทรอนิกส์ได้ โดยใช้คำสั่ง mailto ใน ACTIONของแบบฟอร์ม เมื่อผู้ใช้กดปุ่ม SUBMIT ข้อมูลที่กรอกในแบบฟอร์มจะถูกส่งเป็น ไปรษณีย์อีเลกทรอนิกส์ไปยังผู้รับตามที่อยู่ที่กำหนดทันที รูปแบบ <FORM METHOD=“POST” ACTION=“mailto:user@hostname”> : </FORM>

เอกสารอ้างอิง http://www.w3.org/ http://www.w3shcools.com/ Bryan Pfaffenberger. (2002), Computers in your future 2003., New Jersy , Prentice Hall. H.M Deitel, P.J. Deitel, T.R. Nieto, (2002), Internet & World Wide Web How to Program, Prentice Hall.