.

-- Choose One -- Start HTML Table Form Frame Tricks in HTML JavaScript WWW Example Home

การสร้างแบบฟอร์ม

ถาม - ตอบ HTML

การสร้างแบบฟอร์มจะเริ่มต้นด้วยคำสั่ง Form ดังนี้ <FORM>...</FORM> <FORM NAME="myform" ACTION="url" METHOD="GET|POST"> เขียนอะไรก็ได้ลงมา <INPUT TYPE="button" NAME="button" VALUE="Click"> </FORM> NAME="Form Name" กำหนดชื่อให้กับฟอร์มเป็นค่าที่สามารถเรียกนำไปใช้ได้ ACTION="url" กำหนดค่า url ที่จะใช้ส่งข้อมูลในแบบฟอร์มนี้นออกไป โดยอาจกำหนด เป็น url ของโปรแกรม CGI หรือ LiveWire ที่อยู่บนเครื่องเซิร์ฟเวอร์ METHOD="GET|POST" กำหนดวิธีการรับ-ส่งข้อมูลจากแบบฟอร์มไปยังเซิร์ฟเวอร์ ตาม url ในแอตทริบิวต์ ACTION โดยปกตินิยมใช้เพียง 2 วิธี GET Web browser จะนำข้อมูลในแบบฟอร์มส่งต่อท้าย ไปกับ url (ในแอตทริบิวต์ ACTION) โดยโปรแกรม CGI จะสามารถตรวจสอบข้อมูลเหล่านี้ได้จากตัวแปร QUERY _STRING บนเครื่องเซิร์ฟเวอร์ POST ส่งข้อมูลในแบบฟอร์มผ่านให้เซิร์ฟเวอร์ทาง stdin โดยโปรแกรม CGI จะสามารถตรวจสอบขนาดข้อมูล โดยใช้ตัวแแปร CONTENT_LENGTH บนเครื่อง เซิร์ฟเวอร์ และค่าใน ENCTYPE เป็น "application/x- www-form-urkencoded" ในระหว่างการประมวลผล มันสามารถติดต่อกับคืนไปยังเซิร์ฟเวอร์เพื่อส่งกลับไปยัง ผู้ที่ร้องขอในรูปแบบต่างๆ เช่น ในรูปของเว็บเพจ หรือ E-mail INPUT TYPE="text type" กำหนดชนิดของฟิลด์รับข้อมูล มีอยู่ด้วยกันหลายชนิดขึ้นอยู่กับการใช้งาน ดู ประเภทของ INPUT ได้ที่นี่ VALUE กำหนดค่าเริ่มต้นให้กับฟิลด์รับข้อมูล SIZE กำหนดขนาดของฟิลด์รับข้อมูล (มีใช้บางชนิด ** การทำฟอร์มจะต้องขึ้นต้นด้วย tag <FORM> และจบด้วย </FORM> ทุกครั้ง มิฉะนั้นจะไม่แสดงผลออกมา ประเภทของ INPUT การสร้าง OPTION การสร้างฟิลด์ Comment ประเภทของ INPUT 1. text กำหนดสำหรับเป็นฟิลด์กรอกข้อมูล <INPUT TYPE="text" NAME="Question1"> ผลที่ได้ --> Name ** สามารถจำกัดจำนวนตัวอักษรได้โดยใช้ MAXLENGTH="no" 2. submit เป็นการสร้างปุ่มเพื่อยืนยันข้อมูลที่กรอกลงไปในฟิลด์ <INPUT TYPE="submit" VALUE="Push Me"> ผลที่ได้ --> reset เป็นการสร้างปุ่มเพื่อลบข้อมูลในฟิลด์ทั้งหมดที่ได้เติมลงไป <INPUT TYPE="reset" VALUE="Clear"> ลองกรอกดู --> Name ** ค่า VALUE จะไปปรากฎอยู่บนปุ่ม เราสามารถกำหนดว่าจะเป็นอะไรก็ได้ 3. radio เป็นการสร้างฟิลด์ตัวเลือกและกำหนดให้สามารถเลือกได้เพียงอย่างเดียว <INPUT TYPE="radio" VALUE="Yes"> OK ผลที่ได้ --> OK No Way 4. checkbox เป็นการสร้างฟิลด์ตัวเลือก สามารถเลือกได้มากกว่า 1 ช่อง <INPUT TYPE="checkbox" VALUE="1"> No. 1 ผลที่ได้ --> No. 1 No. 2 5. password เป็นการสร้างฟิลด์สำหรับใส่ password ข้อมูลที่กรอกลงไป จะเป็นรูป * ไม่สามารถอ่านได้ <INPUT TYPE="password" NAME="Password"> ผลที่ได้ --> Password การสร้าง OPTION เป็นการสร้างตัวเลือกอีกแบบหนึ่ง ไว้สำหรับกรณีที่มีข้อมูลมาก <SELECT NAME="name" SIZE="no"> <OPTION>Option 1 <OPTION>Option 2 <OPTION>Option 3 </SELECT> ผลที่จะได้ --> Option 1Option 2Option 3 การสร้างฟิลด์ Comment <TEXTAREA NAME="name" ROWS="no" COLS="no"> </TEXTAREA> ผลที่ได้ --> สามารถเข้าไปดูตัวอย่างแบบฟอร์มได้ที่นี่ http://www.geocities.com/Tokyo/Bay/9293/form.html

---