: หน้าหลัก : เกมส์ : HOT Free : มุขตลก : บทกลอน : ดูดวง : บริการออกแบบเว็บครบวงจร : การสร้างเว็บ : เกร็ดความรู้ : เว็บบอร์ด : เกี่ยวกับเว็บ :
หน้าแรก JAVA
Hosting
หน้าแรกของ Pyayam.com
เว็บบอร์ดของ JavaScripts : Dreamweaver :: HTML :: CSS :: Upload :: Free SCRIPT :: Free HOSTING :: อื่น ๆ :    
Form = บทเรียน Java Script โดย พ ย า ย า ม ดอทคอม
BASIC

+ แนะนำ
 + เรื่องของตัวแปร
 + Operator
 + Statement
 + Function
 + Event
 + OOP
ADVANCE

+ Windows
 + Document Object
 + Form
 + Link
 + Image
 + Math Function
 + String
เขียนสมุดเยี่ยม
webboard
<< Back
-> Refresh
-> แจ้ง link เสีย

 

Form

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

- Text box
- Button
- Checkbox
- Radio
- Select

 

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> ปิดท้ายด้วยนะครับ ถ้ายังไม่เข้าใจ ตัวอย่างการใช้ครับ

พยายาม Pyayam.com :: พ ย า ย า ม ดอทคอม ::
พยายาม
FileEditFormatViewHelp

<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='Pyayam.com'">
Pyayam.com</a>
</body>
</html>

ดูตัวอย่าง

Event ที่ใช้ได้ใน text : onblur onchange onfocus onselect

 

<< Back :: ^ top ^

 

 

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

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

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

 

<< Back :: ^ top ^

 

 

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

พยายาม ดอท คอม

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

<< Back :: ^ top ^

 

 

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

ในชุดเดียวกัน เราสามารถเลือกได้เพียง 1 choice เท่านั้น
Properties และ Event ของ radio ก็เหมือนกับ checkbox เลยครับ แต่ Radio จะมี ข้อแตกต่างนิดนึง ตรงที่ Radio แต่ละตัวจะต้องกำหนดชื่อเป็นชื่อเดียวกัน เพื่อให้มันเป็น Radio ชุดเดียวกัน

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

พยายาม Pyayam.com :: พ ย า ย า ม ดอทคอม ::
พยายาม
FileEditFormatViewHelp

<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 จะใช้ [ ] กำหนดลำดับครับ

 

<< Back :: ^ top ^

 

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

Properties ของ select มีดังนี้ครับ (button ข้างล่างสัมพันธ์กับ select ข้างบนครับ)
เป็นจำนวนรายการใน select
เป็นชื่อของ object select ครับ
ให้ค่าหมายเลขของ option ที่ถูกเลือกอยู่ครับ

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

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

<< Back :: ^ top ^


ฟรีเว็บไซต์สำเร็จรูป สำหรับ ธุรกิจขายตรง อาหารเสริม สร้างเครือข่าย หาทีมงาน ทำงานที่บ้าน ธุรกิจเครือข่าย MLM อาชีพเสริม รายได้พิเศษ - ธุรกิจ/ขายตรง

คม-ชัด-ลึก  : ไทยรัฐ : เดลินิวส์ : แนวหน้า  : ข่าวสด  : มติชน  : กรุงเทพทูเดย์  : กรุงเทพธุรกิจ : ฐานเศรษฐกิจ  : ประชาชาติธุรกิจ : สยามกีฬา : การเมืองไทย  : ข่าวโทรคมนาคมและคอมพิวเตอร์ : สำนักข่าวกรมประชาสัมพันธ์  : สยามธุรกิจ  : ผู้จัดการ : เส้นทางเศรษฐกิจ : อ.ส.ม.ท : อ่านหัวข่าวทุกฉบับ : ค้นข่าวเก่า : Bangkok Post  : ThaiPost  : The Nation : GNN : ThaitownUSA : Siam Chronicle : INN News : MWEB News : ธนาคารแห่งประเทศไทย : ธนาคารเอเชีย : ธนาคารอาคารสงเคราะห์ : ธนาคารไทยพาณิชย์ : ธนาคารกรุงเทพ  : ธนาคารไทยทนุ  : ธนาคารออมสิน : ธนาคารทหารไทย : ธนาคารกสิกรไทย : ธนาคารกรุงศรีอยุธยา : ธนาคารเพื่อการเกษตร : ธนาคารเพื่อการส่งออก : ธนาคารนครหลวงไทย : ธนาคารสแตนดาร์ดชาร์เตอร :

MSN & E-mail : mr.pyayam [ at ] gmail.com
หมายเลขทะเบียนประกอบพานิชย์อิเลคทรอนิกส์ : 0447314800321 คำขอที่ 32 / 2548
Copyright © 2004 - 2008 PYAYAM.com. All rights reserved ®. Hosting by Baansiripatt.com