T ext text ก็คือช่องรับข้อมูลบรรทัดเดียวครับ เป็น Property ของ form อีกทีหนึ่งProperties ของ text มีดังนี้ครับdefaultValue เป็นค่า Default ของข้อความที่ปรากฎในใน text ครับname ชื่อของ text ครับ ควรจะกำหนดใน tag <input> จะทำให้อ้างถึงได้สะดวกครับvalue เป็นข้อความที่ปรากฎใน 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> ปิดท้ายด้วยนะครับ
<![CDATA[
<head><title>Using Text Form</title></head>
<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>
</font></font></table><form>
<input type="button" value="View Example" onclick="window.open('jsex22.html')">
</form>
<br>
<font face="CordiaUPC">Event ที่ใช้ได้ใน text : <font color=ffaaee>onblur onchange
onfocus onselect</font></font>
<p> <font face="CordiaUPC"><em><font color=00ff00 size=+2>B</font><font color=00aaff size=+2>utton</font></em><br>
<font color=cafe32>Button</font> ก็คือปุ่มกดครับ แบบเดียวกับปุ่ม "View Example"
ที่มีอยู่แทบทุกบท คุณอาจคิดว่า Button ไม่มีอะไรน่าสนใจ เพราะไม่เคยเห็น effect
ของ button แต่ลองดู Button ข้างล่างนี้สิครับ </font>
<form name="ggg">
<font face="CordiaUPC">
<input type=button name="ton" onclick="alert('เด็ดไหมล่ะ!')" value="This is">
</font>
</form>
<font face="CordiaUPC"><br>
Properties ก็เหมือน text เปี๊ยบเลย แต่ไม่มี DefaultValue เท่านั้นเอง การอ้างถึง
Button ก็ใช้วิธีเดียวกันกับ text เลยครับ แต่ใน tag <input> ให้เปลี่ยน จาก
type=text เป็น type=button เท่านั้นเองครับ</font>
<p><font face="CordiaUPC"> Event ที่ใช้ได้ใน button : <font color=ffaaee>onblur
onfocus onclick</font></font>
<p> <font face="CordiaUPC"><em><font color=00ff00 size=+2>C</font><font color=00aaff size=+2>heckbox</font></em><br>
<font color=cafe32>Checkbox</font> ก็คือช่องที่ให้ใส่เครื่องหมายถูกครับ </font>
<p> <font face="CordiaUPC">
<input type="checkbox" onclick="if (checked) {alert('ดีแล้วครับ')} else {alert('อ้าว! ไม่เข้าใจหรอกหรือ')}">
เข้าใจไม๊เอ่ย</font>
<p><font face="CordiaUPC"> Properties ต่างๆก็มี <font color=ffff00>name value
checked defaultChecked</font><br>
<font color=cafe23>name</font> กับ <font color=cafe23>value</font> ก็เหมือนกับอันอื่นครับ
ส่วน <font color=cafe23>checked</font> จะให้ค่าเป็น 1 หรือ 0 หมายถึงถูก check
หรือยัง</font>
<p><font face="CordiaUPC"> Event ของ Checkbok :<font color=ffaaee>onblur onclick
onfocus</font></font>
<p> <font face="CordiaUPC"><em><font color=00ff00 size=+2>R</font><font color=00aaff size=+2>adio</font></em><br>
<font color=ffeeaa>radio</font> ก็คือปุ่ม Radio แบบนี้ไงครับ </font>
<form name=rad>
<font face="CordiaUPC">
<input type=radio name=rad1>
<input type=radio name=rad1>
<input type=radio name=rad1>
</font>
</form>
<font face="CordiaUPC"><br>
ในชุดเดียวกัน เราสามารถเลือกได้เพียง 1 choice เท่านั้น <br>
Properties และ Event ของ radio ก็เหมือนกับ checkbox เลยครับ แต่ Radio จะมี ข้อแตกต่างนิดนึง
ตรงที่ Radio แต่ละตัวจะต้องกำหนดชื่อเป็นชื่อเดียวกัน เพื่อให้มันเป็น Radio ชุดเดียวกัน
<font color='ff1111'>แล้วเราจะรู้ได้อย่างไรว่า radio ไหนถูกเลือก <br>
</font> เราใช้ Array ครับ<br>
ดูตัวอย่างนี้ละกัน<br>
<font color=ffeeaa size=4> <xmp> <head></font></font><font color=ffeeaa face="system" size=4>
<title>Using radio</title>
<font face="CordiaUPC"></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>
</font>
<form name='rform'>
<font face="CordiaUPC">
<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()">
</font>
</form>
</font>
<form>
<font face="CordiaUPC">
<input type=button onclick="window.open('jsex23.html')" value="View Example">
<br>
</font>
</form>
<font face="CordiaUPC">โปรแกรมนี้ในส่วนของ head เราจะสร้างฟังก์ชั่นสำหรับส่งค่าจาก
radio ไป text เพื่อนำไปแสดงผลครับ<br>
ในการใช้ array จะเริ่มนับจาก 0 เสมอ โดยการอ้างถึงลำดับใน array จะใช้ [ ] กำหนดลำดับครับ</font>
<p> <font face="CordiaUPC"><em><font color=00ff00 size=+2>S</font><font color=00aaff size=+2>elect</font></em><br>
เป็นรายการให้เลือกครับ <br>
</font>
<form name=sexf>
<font face="CordiaUPC">
<select name=sex >
<option>Choice 1
<option>Choice 2
<option>Choice 3
<option>Choice 4
<option>Choice 5
</select>
</font>
</form>
<font color="ffeeaa" face="CordiaUPC">Properties</font><font face="CordiaUPC">
ของ select มีดังนี้ครับ (button ข้างล่างสัมพันธ์กับ select ข้างบนครับ)<br>
</font>
<table>
<tr>
<td>
<form>
<font face="CordiaUPC">
<input type=button value="length" onclick="alert(document.sexf.sex.length)">
</font>
</form>
</td>
<td><font face="CordiaUPC" size="2" color="ffffff"> เป็นจำนวนรายการใน select</font></td>
</tr>
<tr>
<td>
<form>
<font face="CordiaUPC">
<input type=button value="name" onclick="alert(document.sexf.sex.name)">
</font>
</form>
</td>
<td><font face="CordiaUPC" size="2" color="ffffff"> เป็นชื่อของ object select
ครับ</font></td>
</tr>
<tr>
<td>
<form>
<font face="CordiaUPC">
<input type=button value="selectedIndex" onclick="alert(document.sexf.sex.selectedIndex)">
</font>
</form>
</td>
<td><font face="CordiaUPC" size="2" color="ffffff">ให้ค่าหมายเลขของ option
ที่ถูกเลือกอยู่ครับ</font></td>
</tr>
</table>
<font face="CordiaUPC"><br>
นอกจากนี้แล้วก็ยังมี Property อีกตัวหนึ่ง ก็คือ <font color=00ff00>options</font>
ครับ <font color=00ff00>options</font> เป็น <font color=00ff00>Array</font> ครับ
เป็น object ตัวหนึ่ง มี Properties น่าสนใจพอสมควร <br>
</font>
<table>
<tr>
<td>
<form>
<font face="CordiaUPC">
<input type=button value="options[0].index" onclick="alert(document.sexf.sex.options[0].index)">
</font>
</form>
</td>
<td><font face="CordiaUPC" size="2" color="ffffff"> เป็นหมายเลขของ options
ครับ</font></td>
</tr>
<tr>
<td>
<form>
<font face="CordiaUPC">
<input type=button value="options[0].selected" onclick="alert(document.sexf.sex.options[0].selected)">
</font>
</form>
</td>
<td>
<font face="CordiaUPC" size="2" color="ffffff"> Option นี้ถูกเลือกหรือไม่</font><font face="MS Sans Serif" size=2 color=ffffff>
<td>
</font></tr>
<tr>
<td>
<form>
<font face="CordiaUPC">
<input type=button value="options[0].text" onclick="alert(document.sexf.sex.options[0].text)">
</font>
</form>
</td>
<td><font face="CordiaUPC" size="2" color="ffffff">ข้อความของ Option นี้ครับ</font></td>
</tr>
</table>
<font face="CordiaUPC">ขอจบ form processing แค่นี้แล้วกันนะครับ จริงๆแล้วยังมีอีก
แต่ไม่ค่อยสำคัญอะไรนัก ถ้าอยากค้นคว้าเพิ่มเติมก็ไปที่นี่นะครับ ที่นี่จะมีหนังสือทั้งเล่มให้คุณอ่านเลย
แต่เป็นภาษาอังกฤษล้วนนะครับ <a href="http://www.developer.com/">http://www.developer.com</a>
</font>
<TD valign=top> <font face="CordiaUPC"> </font></TD>
<p align=right> <font face="CordiaUPC"><a href="jstuep11.html" onmouseover="document.next.src='nxcp.gif'" onmouseout="document.next.src='nxcpd.gif'"></a></font><a href="jstuep11.html" onmouseover="document.next.src='nxcp.gif'" onmouseout="document.next.src='nxcpd.gif'"><img src="nxcpd.gif" name="next" border=0></a><br>
<a href="jstue.html" onmouseover="document.content.src='btct.gif'" onmouseout="document.content.src='btctd.gif'"><img src="btctd.gif" name="content" border=0></a><br>
<a href="index.html" onmouseover="document.indexp.src='bthp.gif'" onmouseout="document.indexp.src='bthpd.gif'"><img src="bthpd.gif" name="indexp" border=0></a><br>
<CENTER>
<script language="Javascript">
timesc=setTimeout("scrolltext()",500);
</script>
</center><img src="../../../visit.geocities.com/visit.gifฟ1003936897" border=0 width=1 height=1>
<IMG SRC="http://geo.yahoo.com/serv?s=76001077&t=1003936897" ALT=1 WIDTH=1 HEIGHT=1>
</html>
]]>
