Form Processing

คุณคงเคยพบกับ Banner ข้างบนนี้มาก่อนนะครับ เจ้านี่แหละ มันเกิดจากการนำ object form ไปประยุกต์ ใช้ กับ setTimeout ในบทที่ผ่านมา และ นอกจากนี้แล้ว Form ยังมีคุณสมบัติน่าสนใจอีกมาก ทั้ง Button Checkbox radio ฯลฯ รวมทั้ง text ที่อยู่ข้างบนนี้ด้วยครับ

Text
text ก็คือช่องรับข้อมูลบรรทัดเดียวครับ เป็น Property ของ form อีกทีหนึ่ง
Properties ของ text มีดังนี้ครับ
defaultValue เป็นค่า Default ของข้อความที่ปรากฎในใน text ครับ
name ชื่อของ text ครับ ควรจะกำหนดใน tag <input> จะทำให้อ้างถึงได้สะดวกครับ
valueเป็นข้อความที่ปรากฎใน text ครับ
ส่วนใหญ่แล้ว Properties ที่ถูกนำมาใช้ คือ value ครับ เพราะเป็น Property ที่อ้างถึงข้อความใน text โดยตรง

การอ้างถึง text ทำได้โดย
1. ใช้ tag <form name=ชื่อของform> กำหนดชื่อเพื่อใช้อ้างอิงครับ
2. ใช้ tag <input type=text name=ชื่อของtext> เป็นการสร้าง form ชนิด text ครับ
3. ในการอ้างอิงถึงข้อความใน text ใช้แบบนี้ครับ
document.formname.textname.value
4. แล้วก็ใช้ tag </form> ปิดท้ายด้วยนะครับ
ถ้ายังไม่เข้าใจ ตัวอย่างการใช้ครับ

<html> <head><title>Using Text Form</title></head> <body> <form name='crazy'> <input type="text" name='hero'> </form> <br> <a href="javascript:void(0)" onclick="document.crazy.hero.value='สวัสดีครับ'"> สวัสดีครับ</a> <a href="javascript:void(0)" onclick="document.crazy.hero.value='Hi! My dear'"> Hi! My dear</a> </body> </html>
Event ที่ใช้ได้ใน text : onblur onchange onfocus onselect

Button
Button ก็คือปุ่มกดครับ แบบเดียวกับปุ่ม "View Example" ที่มีอยู่แทบทุกบท คุณอาจคิดว่า Button ไม่มีอะไรน่าสนใจ เพราะไม่เคยเห็น effect ของ button แต่ลองดู Button ข้างล่างนี้สิครับ

Properties ก็เหมือน text เปี๊ยบเลย แต่ไม่มี DefaultValue เท่านั้นเอง การอ้างถึง Button ก็ใช้วิธีเดียวกันกับ text เลยครับ แต่ใน tag <input> ให้เปลี่ยน จาก type=text เป็น type=button เท่านั้นเองครับ

Event ที่ใช้ได้ใน button : onblur onfocus onclick

Checkbox
Checkbox ก็คือช่องที่ให้ใส่เครื่องหมายถูกครับ

เข้าใจไม๊เอ่ย

Properties ต่างๆก็มี name value checked defaultChecked
name กับ value ก็เหมือนกับอันอื่นครับ ส่วน checked จะให้ค่าเป็น 1 หรือ 0 หมายถึงถูก check หรือยัง

Event ของ Checkbok :onblur onclick onfocus

Radio
radio ก็คือปุ่ม Radio แบบนี้ไงครับ

ในชุดเดียวกัน เราสามารถเลือกได้เพียง 1 choice เท่านั้น
Properties และ Event ของ radio ก็เหมือนกับ checkbox เลยครับ แต่ Radio จะมี ข้อแตกต่างนิดนึง ตรงที่ Radio แต่ละตัวจะต้องกำหนดชื่อเป็นชื่อเดียวกัน เพื่อให้มันเป็น Radio ชุดเดียวกัน แล้วเราจะรู้ได้อย่างไรว่า radio ไหนถูกเลือก
เราใช้ Array ครับ
ดูตัวอย่างนี้ละกัน
<html> <head><title>Using radio</title></head> <script language="javascript"> function process() { with (document.rform) { play0.value=ex[0].checked; play1.value=ex[1].checked; play2.value=ex[2].checked; play3.value=ex[3].checked; } } </script> <body> <form name='rform'> <input type=text name='play0'><br> <input type=text name='play1'><br> <input type=text name='play2'><br> <input type=text name='play3'><br> <input type=radio name='ex'> <input type=radio name='ex'> <input type=radio name='ex'> <input type=radio name='ex'> <input type=button value='process' onclick="process()"> </form> </body> </html> โปรแกรมนี้ในส่วนของ head เราจะสร้างฟังก์ชั่นสำหรับส่งค่าจาก radio ไป text เพื่อนำไปแสดงผลครับ
ในการใช้ array จะเริ่มนับจาก 0 เสมอ โดยการอ้างถึงลำดับใน array จะใช้ [ ] กำหนดลำดับครับ

Select
เป็นรายการให้เลือกครับ

Properties ของ select มีดังนี้ครับ (button ข้างล่างสัมพันธ์กับ select ข้างบนครับ)

	เป็นจำนวนรายการใน select
	เป็นชื่อของ object select ครับ
	ให้ค่าหมายเลขของ option ที่ถูกเลือกอยู่ครับ

นอกจากนี้แล้วก็ยังมี Property อีกตัวหนึ่ง ก็คือ options ครับ options เป็น Array ครับ เป็น object ตัวหนึ่ง มี Properties น่าสนใจพอสมควร

	เป็นหมายเลขของ options ครับ
	Option นี้ถูกเลือกหรือไม่
	ข้อความของ Option นี้ครับ

ขอจบ form processing แค่นี้แล้วกันนะครับ จริงๆแล้วยังมีอีก แต่ไม่ค่อยสำคัญอะไรนัก ถ้าอยากค้นคว้าเพิ่มเติมก็ไปที่นี่นะครับ ที่นี่จะมีหนังสือทั้งเล่มให้คุณอ่านเลย แต่เป็นภาษาอังกฤษล้วนนะครับ http://www.developer.com