js入门·表单详解一（修改表单属性，修改表单元素值）
实在javascript入门·Document对象入门讲解(访问表单，创建新页，获取页标题) 一文中，我们已经把表单的一些基本访问等弄清楚了，下面我们深入的学下表单的属性以及对表单元素的简单操作！
<%@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 gaibian()
{
var acti=document.getElementById("select").value;//得到ID为select元素的值
var mont=document.getElementById("select2").value;//同上
document.form1.action=acti;//设置值
document.form1.method=mont;//同上
}
function bian()
{
var form=document.forms[1];//将当前页第二个表单赋给变量form，以便以后引用
for(var i=0;i<form.elements.length;i++)//循环表单内的元素数组的最大项
{
if(form.elements[i].type=="text")//如果当前元素的类型是text
{
form.elements[i].value="田洪川";//那就把他的值赋成 田洪川
}
if(form.elements[i].type=="checkbox")//如果是复选框
{
if(form.elements[i].checked)//如果是选中的
{
form.elements[i].checked=null;//取消选择
}
else
{
form.elements[i].checked="checked" //就给他选中
}
}
}
}
</script>
</head>
<body>
<p>其实在<a href="http://www.cnblogs.com/thcjp/archive/2006/08/08/470997.html">javascript入门·Document对象入门讲解(访问表单，创建新页，获取页标题)</a> 一文中，我们已经把表单的一些基本访问等弄清楚了，下面我们深入的学下表单的属性以及对表单元素的简单操作！</p><hr />
<p><strong>演示一 ： 根据需求，定做表单</strong></p>
<p>你先按下提交提交表单，后退，然后再点修改表单，然后再提交表单，看效果</p>
<form id="form1" name="form1" method="post" action="http://127.0.0.1/">
现在的指向是 test.asp ，方法是 post
<input type="submit" name="Submit2" value="提交表单" />
</form>
<p>其实做那么多都没有，直接作两个属性吧
<select name="select">
<option value="http://thcjp.cnblogs.com/">田洪川的博客</option>
<option value="http://163.com/">网易</option>
</select>
<select name="select2">
<option value="GET">get</option>
<option value="post">post</option>
</select>
<input type="submit" name="Submit" value="修改表单" onclick="gaibian()" />
</p><hr />
<p><strong>演示二 ：修改表单内特定类型元素的值</strong></p>
<p>form.elements[]属性：除了跟踪表单中每种类型的元素外，浏览器还保留了一张表单中所有控件元素的列表，元素的顺序就是在HTML中的位置，所以对引用相当的方便。</p>
<p>注意，这个表单使用了动作 onsubmit="return false"动作，你可以去掉试下 </p>
<form name="form2" onsubmit="return false">
<table width="371" border="0" cellspacing="5" cellpadding="5">
<tr>
<td width="168"><input type="text" name="textfield" /></td>
<td width="197"><input type="text" name="textfield2" /></td>
</tr>
<tr>
<td align="center"><input name="checkbox" type="checkbox" value="checkbox" /></td>
<td align="center"><input name="checkbox2" type="checkbox" value="checkbox" checked="checked" /></td>
</tr>
<tr>
<td colspan="2" align="center"><input name="" type="button" value="提交" onclick="bian()" /></td>
</tr>
</table>
</form>
<p> </p>
</body>
</html>
演示一 ： 根据需求，定做表单
你先按下提交提交表单，后退，然后再点修改表单，然后再提交表单，看效果
现在的指向是 test.asp ，方法是 post
其实做那么多都没有，直接作两个属性吧 田洪川的博客 网易 get post
演示二 ：修改表单内特定类型元素的值
form.elements[]属性：除了跟踪表单中每种类型的元素外，浏览器还保留了一张表单中所有控件元素的列表，元素的顺序就是在HTML中的位置，所以对引用相当的方便。
<%@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 gaibian(){
var acti=document.getElementById("select").value;//得到ID为select元素的值 var mont=document.getElementById("select2").value;//同上 document.form1.action=acti;//设置值 document.form1.method=mont;//同上}function bian(){ var form=document.forms[1];//将当前页第二个表单赋给变量form，以便以后引用 for(var i=0;i<form.elements.length;i++)//循环表单内的元素数组的最大项 { if(form.elements[i].type=="text")//如果当前元素的类型是text { form.elements[i].value="田洪川";//那就把他的值赋成 田洪川 } if(form.elements[i].type=="checkbox")//如果是复选框 { if(form.elements[i].checked)//如果是选中的 { form.elements[i].checked=null;//取消选择 } else { form.elements[i].checked="checked" //就给他选中 } } }}</script></head><body><p>其实在<a href="http://www.cnblogs.com/thcjp/archive/2006/08/08/470997.html">javascript入门·Document对象入门讲解(访问表单，创建新页，获取页标题)</a> 一文中，我们已经把表单的一些基本访问等弄清楚了，下面我们深入的学下表单的属性以及对表单元素的简单操作！</p><hr /><p><strong>演示一 ： 根据需求，定做表单</strong></p><p>你先按下提交提交表单，后退，然后再点修改表单，然后再提交表单，看效果</p><form id="form1" name="form1" method="post" action="http://127.0.0.1/"> 现在的指向是 test.asp ，方法是 post <input type="submit" name="Submit2" value="提交表单" /></form><p>其实做那么多都没有，直接作两个属性吧 <select name="select"> <option value="http://thcjp.cnblogs.com/">田洪川的博客</option> <option value="http://163.com/">网易</option> </select> <select name="select2"> <option value="GET">get</option> <option value="post">post</option> </select> <input type="submit" name="Submit" value="修改表单" onclick="gaibian()" /></p><hr /><p><strong>演示二 ：修改表单内特定类型元素的值</strong></p><p>form.elements[]属性：除了跟踪表单中每种类型的元素外，浏览器还保留了一张表单中所有控件元素的列表，元素的顺序就是在HTML中的位置，所以对引用相当的方便。</p><p>注意，这个表单使用了动作 onsubmit="return false"动作，你可以去掉试下 </p><form name="form2" onsubmit="return false"> <table width="371" border="0" cellspacing="5" cellpadding="5"> <tr> <td width="168"><input type="text" name="textfield" /></td> <td width="197"><input type="text" name="textfield2" /></td> </tr> <tr> <td align="center"><input name="checkbox" type="checkbox" value="checkbox" /></td> <td align="center"><input name="checkbox2" type="checkbox" value="checkbox" checked="checked" /></td> </tr> <tr> <td colspan="2" align="center"><input name="" type="button" value="提交" onclick="bian()" /></td> </tr> </table></form><p> </p></body></html>
长期招聘java，有找工作可以联系我，微信：caozhenhua1563
