ข้อมูลองค์ความรู้โดย
กฤษณี โภโต
ตำแหน่ง ผู้จัดการ

บทที่ 10 Form Java

ประเภททางด้าน IT หลัก :   Development & Integration
ประเภททางด้าน IT ย่อย :   Java
  ลงข้อมูลเมื่อ 17:01:26 10/05/2013
  Page View (1859) แบ่งปัน

บทที่ 10 Form

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

Text box

textbox ก็คือช่องรับข้อมูลบรรทัดเดียวครับ เป็น 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 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

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 >
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 name='play0'><br>
ex[1]<input name='play1'><br>
ex[2]<input name='play2'><br>
ex[3]<input name='play3'><br>
<input name='ex'>
<input name='ex'>
<input name='ex'>
<input name='ex'>
</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 นี้ครับ

ที่มาจาก : http://realdev.truehits.net

 



องค์ความรู้ที่มีผู้อ่านมากสุด
สร้าง BarCode จาก Java โดยใช้ lib ของ ZXing ( Open Source )
สร้าง BarCode จาก Java โดยใช้ lib ของ ZXing ( Open Source )

โดย... กฤษณี โภโต

บทที่ 13 Math Function
ในการเขียนโปรแกรม มีบางครั้งที่เราต้องอาศัยการคำนวณทางคณิตศาสตร์ JavaScript ก็มีคุณสมบัติในการคำนวณทางคณิตศาสตร์กะเค้าเหมือนกันครับ

โดย... กฤษณี โภโต

บทที่ 9 Document Object
Document object คืออะไร Document Object หมายถึงเอกสาร HTML ที่เป็นเวบเพจที่กำลังแสดงอยู่ในหน้าต่างหลัก เป็น Propertiy ของ window (window.document) Document Object เปรียบเสมือนหน้าหนังสือ หากคุณลองเปิดหนังสือดูจะเห็น หมายเลขหน้า และ หมายเลขบท ในทาง OOP หมายเลขหน้าและหมายเลขบทเหล่านั้นก็เป็น Properties สำหรับบอกคุณสมบัติ ของหน้านั้น ว่าอยู่ในหน้าที่เท่าไหร่ บทใด นอกจากนี้ ในหน้าหนังสือยังมีเนื้อหาสาระที่ประกอบอยู่ภายใน ไม่ว่าจะเป็นเนื้อหา หัวข้อ ย่อหน้า รูปภาพ ตาราง ฯลฯ สิ่งเหล่านี้ก็นับเป็น Properties ของหน้าหนังสือเช่นกันครับ

โดย... กฤษณี โภโต

บทที่ 2 เรื่องของตัวแปร JavaScript
JavaScript ก็เหมือนภาษาที่ใช้เขียนโปรแกรมทั่วไป ตรงที่มีตัวแปรสำหรับเก็บค่า จากส่วนหนึ่งของ Program แล้วก็เอาไปใช้ในส่วนอื่นๆได้ ตัวแปรก็คือ ชื่อที่เรากำหนดขึ้นมาสำหรับเก็บค่า อย่างเช่น เราอาจกำหนดตัวแปรชื่อว่า imageName เพื่อไปเก็บชื่อไฟล์ภาพๆหนึ่ง หรือ อาจกำหนดให้ amount ไปเก็บจำนวนเต็ม เป็นต้น

โดย... กฤษณี โภโต

บทที่ 6 Event Java
Event คืออะไร

โดย... กฤษณี โภโต

บทที่ 14 String
ไม่ว่าจะเขียนโปรแกรมด้วยภาษาใด การจัดการกับ String ก็เป็นความสามารถที่ขาดไม่ได้ ใน JavaScript ก็เช่นกัน

โดย... กฤษณี โภโต

บทที่ 12 Images
บทที่ 12 Images

โดย... กฤษณี โภโต

บทที่ 7 OOP for JavaScript
Object เป็นความสามารถที่สำคัญอย่างหนึ่งของ JavaScript เรียกได้ว่าเป็นพระเอกของเรื่องเลยเชียวนะ หน้านี้ผมจะแนะนำให้รู้จักกับ Object ก่อนว่าเป็นอย่างไรนะครับ

โดย... กฤษณี โภโต

บทที่ 11 Links
บทที่ 11 Links

โดย... กฤษณี โภโต

บทที่ 3 Operator in JavaScript
บทที่ 3 Operator in JavaScript

โดย... กฤษณี โภโต