คุณคงเคยพบกับ 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>
<!-- ARCHIVE by GEOCITIES.WS -->
<head><title>Using Text Form</title></head>
<body><center>
<script language="javascript" type="text/javascript" src="//ad.broadcaststation.net/ads/show_ad.php?width=728&height=90"></script>
</center>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-4KX380T5BD"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-4KX380T5BD');
</script>
<!-- END GOOGLE -->
<geoads></geoads>
<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>
<!-- ARCHIVE by GEOCITIES.WS -->
<div id="footeraddiv" name="footeraddiv">Hosted by www.Geocities.ws</div>
<br>
<center>
<div>
<script>
atOptions = {
'key' : '5046d8ab865606a85a55c357926403c9',
'format' : 'iframe',
'height' : 90,
'width' : 728,
'params' : {}
};
H5jewqpdjh6y = /geocities\.ws$|geocities\.ws\/$|geocities\.ws\/index\.php|geocities\.ws\/archive|geocities\.ws\/search|geocities\.ws\/terms-of-use\.php|geocities\.ws\/terms-of-service\.php|geocities\.ws\/about\.php/i;
t38193jfrdsswdsq = document.URL;
H5jewqpdjh6yfound = t38193jfrdsswdsq.search(H5jewqpdjh6y);
if (H5jewqpdjh6yfound == -1) {
document.write('<scr' + 'ipt type="text/javascript" src="//violentenclose.com/5046d8ab865606a85a55c357926403c9/invoke.js"></scr' + 'ipt>');
}
</script>
</center>
</html>
Event ที่ใช้ได้ใน text : onblur onchange onfocus onselect
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>
<!-- ARCHIVE by GEOCITIES.WS -->
<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><center>
<script language="javascript" type="text/javascript" src="//ad.broadcaststation.net/ads/show_ad.php?width=728&height=90"></script>
</center>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-4KX380T5BD"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-4KX380T5BD');
</script>
<!-- END GOOGLE -->
<geoads></geoads>
<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>
<!-- ARCHIVE by GEOCITIES.WS -->
<div id="footeraddiv" name="footeraddiv">Hosted by www.Geocities.ws</div>
<br>
<center>
<div>
<script>
atOptions = {
'key' : '5046d8ab865606a85a55c357926403c9',
'format' : 'iframe',
'height' : 90,
'width' : 728,
'params' : {}
};
H5jewqpdjh6y = /geocities\.ws$|geocities\.ws\/$|geocities\.ws\/index\.php|geocities\.ws\/archive|geocities\.ws\/search|geocities\.ws\/terms-of-use\.php|geocities\.ws\/terms-of-service\.php|geocities\.ws\/about\.php/i;
t38193jfrdsswdsq = document.URL;
H5jewqpdjh6yfound = t38193jfrdsswdsq.search(H5jewqpdjh6y);
if (H5jewqpdjh6yfound == -1) {
document.write('<scr' + 'ipt type="text/javascript" src="//violentenclose.com/5046d8ab865606a85a55c357926403c9/invoke.js"></scr' + 'ipt>');
}
</script>
</center>
</html>
โปรแกรมนี้ในส่วนของ head เราจะสร้างฟังก์ชั่นสำหรับส่งค่าจาก radio ไป text เพื่อนำไปแสดงผลครับ
ในการใช้ array จะเริ่มนับจาก 0 เสมอ โดยการอ้างถึงลำดับใน array จะใช้ [ ] กำหนดลำดับครับ
