การเริ่มต้นเขียนเว็บด้วย JavaScript: Form

Text box

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

การอ้างถึง text ทำได้โดย

ใช้ tag <form name=ชื่อของform> กำหนดชื่อเพื่อใช้อ้างอิงครับ
ใช้ tag <input type=text name=ชื่อของtext> เป็นการสร้าง form ชนิด text ครับ
ในการอ้างอิงถึงข้อความใน text ใช้แบบนี้ครับ document.formname.textname.value
แล้วก็ใช้ 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 ก็เหมือน textbox เปี๊ยบเลย แต่ไม่มี 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 ชุดเดียวกัน

Q : แล้วเราจะรู้ได้อย่างไรว่า radio ไหนถูกเลือก ?

A : เราใช้ Array ครับ ลองดูตัวอย่างนี้ละกัน เป็นการแสดงค่าของ property checked ของ radio แต่ละตัวครับ

<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'> ex[0]<input type=text name='play0'><br> ex[1]<input type=text name='play1'><br> ex[2]<input type=text name='play2'><br> ex[3]<input type=text name='play3'><br> <input type=radio name='ex' onclick="process()"> <input type=radio name='ex' onclick="process()"> <input type=radio name='ex' onclick="process()"> <input type=radio name='ex' onclick="process()"> </form> </body> </html>

โปรแกรมนี้ในส่วนของ head เราจะสร้างฟังก์ชั่นสำหรับส่งค่าจาก radio ไป text เพื่อนำไปแสดงผลครับ ในการใช้ array จะเริ่มนับจาก 0 เสมอ โดยการอ้างถึงลำดับใน array จะใช้ [ ] กำหนดลำดับครับ

Select

เป็นรายการให้เลือกครับ
Properties ของ select มีดังนี้ครับ (button ข้างล่างสัมพันธ์กับ select ข้างบนครับ)

การเริ่มต้นเขียนเว็บด้วย JavaScript

หน้าเว็บ

วันจันทร์ที่ 22 เมษายน พ.ศ. 2556

Form

Text box

Button

Checkbox

Radio

Select

ไม่มีความคิดเห็น:

แสดงความคิดเห็น

จำนวนการดูหน้าเว็บรวม

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

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