文本相关对象：就是每个与文本相关的HTML元素（文本，密码，隐藏域，文本域等）这些东东其实只有两个属性被重视（确切说是被我重视）onchenge和value，前者调用函数，后者求、赋值，在AJAX&javascript入门系列这之前的实例中已经用了很多次了，这里就简单演示一个了！
演示一 ： 在另外文本域显示密码（在前面密码框输入你的银行密码）
前面输入的是
按钮对象：没什么说的，看下演示咯，其实按钮用得最多的还是 onclick
演示二：改变按钮上的文字以及状态
复选框对象：其实这个在http://www.cnblogs.com/thcjp/archive/2006/08/08/471565.html 一文里面已经有演示了，这里大概说下，复选框的value是个很特殊的东西，他不可见，但是相对脚本来说却非常重要，复选框最重要的一个属性当然还是选中与否的 checked 这个属性返回Boolean值！
演示三 ：没啥子说的，你选下下面这个复选框再取消选择就知道了
单选按纽对象：单选按纽有个毛病，要使他们在一组，就必须给他们相同的名字，当你使用同名字制定了一组按钮后，页面载入后也会将同名字的一组元素作为一个数
组处理，这样以来，我们就可以使用 document.formname.groupname.length 的方式得出该组有多少元素，同理，可以使用 document.formname.groupname[index].checked 来判断当前元素是否被选中 。
演示四：显示两组按钮中都分别显示选择了什么
<%@LANGUAGE="JAVASCRIPT" CODEPAGE="936"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>表单和表单元素（文本相关，按钮，单、复选按钮）</title><script language="javascript">
function txt()
{//改变文本框的值
document.getElementById("txt").value=document.getElementById("pwd").value;
}function subm(){//改变按钮上的字 document.all.submm.value="你按过我了";//该行使用了一种比较老的查找控件的方法 document.getElementById("submm").disabled=true;//将按钮设置为可见不可用状态}function chk(){ var chhkk=document.all.chkname;//将复选框对象赋给变量chhkk，方便以后的多次引用 if(chhkk.checked){//如果被选中了 alert("感谢选举"+ chhkk.value )//弹出提醒对话框，包含复选框的值 } else{ alert("你有本事，敢不选"+ chhkk.value) } }function vote(){ var form=document.rad; for(var i=0;i<form.onerad.length;i++){ if(form.onerad[i].checked){ break } } for(var j=0;j<form.tworad.length;j++){ if(form.tworad[j].checked){ break; } } alert(form.onerad[i].value +"vs"+ form.tworad[j].value)
}</script></head><body><p><strong>文本相关对象</strong>：就是每个与文本相关的HTML元素（文本，密码，隐藏域，文本域等）这些东东其实只有两个属性被重视（确切说是被我重视）onchenge和value，前者调用函数，后者求、赋值，在<strong><a href="http://www.cnblogs.com/thcjp/category/65304.html">AJAX&javascript入门系列</a></strong>这之前的实例中已经用了很多次了，这里就简单演示一个了！</p><p><strong>演示一 ： 在另外文本域显示密码</strong>（在前面密码框输入你的银行密码）</p><p> <input type="password" name="pwd" onchange="txt()" /> 前面输入的是 <textarea name="txt"></textarea></p><hr><p><strong>按钮对象</strong>：没什么说的，看下演示咯，其实按钮用得最多的还是 onclick </p><p><strong>演示二：改变按钮上的文字以及状态</strong></p><p><strong> <input type="submit" name="submm" value="提交" onclick="subm()" /></strong></p><hr /><p><strong>复选框对象</strong>：其实这个在<a href="http://www.cnblogs.com/thcjp/archive/2006/08/08/471565.html">http://www.cnblogs.com/thcjp/archive/2006/08/08/471565.html</a> 一文里面已经有演示了，这里大概说下，复选框的value是个很特殊的东西，他不可见，但是相对脚本来说却非常重要，复选框最重要的一个属性当然还是选中与否的 checked 这个属性返回Boolean值！</p><p><strong>演示三 ：没啥子说的，你选下下面这个复选框再取消选择就知道了</strong></p><p> <input type="checkbox" name="chkname" value="天轰穿" onclick="chk()" /></p><hr /><p><strong>单选按纽对象</strong>：单选按纽有个毛病，要使他们在一组，就必须给他们相同的名字，当你使用同名字制定了一组按钮后，页面载入后也会将同名字的一组元素作为一个数<br />组处理，这样以来，我们就可以使用 <strong>document.formname.groupname.length</strong> 的方式得出该组有多少元素，同理，可以使用 <strong>document.formname.groupname[index].checked</strong> 来判断当前元素是否被选中 。</p><p><strong>演示四：显示两组按钮中都分别显示选择了什么 </strong></p><form name="rad" onsubmit="return false"><table width="400" border="0" cellspacing="0" cellpadding="5"> <tr> <td align="center" bgcolor="#CDCDCD">第一组</td> <td align="center">第二组</td> </tr> <tr> <td bgcolor="#CDCDCD"><table width="200" border="0" cellspacing="0" cellpadding="5"> <tr> <td width="73">大甜甜</td> <td width="107"><input type="radio" name="onerad" value="大甜甜" /></td> </tr> <tr> <td>小甜甜</td> <td><input type="radio" name="onerad" value="小甜甜" /></td> </tr> <tr> <td>老甜甜</td> <td><input type="radio" name="onerad" value="老甜甜" /></td> </tr> </table></td> <td><table width="200" border="0" cellspacing="0" cellpadding="5"> <tr> <td width="67">老不死</td> <td width="113"><input type="radio" name="tworad" value="老不死" /></td> </tr> <tr> <td>打不死</td> <td><input type="radio" name="tworad" value="打不死" /></td> </tr> <tr> <td>小不死</td> <td><input type="radio" name="tworad" value="小不死" /></td> </tr> </table></td> </tr> <tr> <td colspan="2" align="center"><input type="submit" name="Submit" value="提交" onclick="vote()" /></td> </tr></table><hr /></form></body></html>