js入门·表单详解一（修改表单属性，修改表单元素值）

其实在javascript入门·Document对象入门讲解(访问表单，创建新页，获取页标题) 一文中，我们已经把表单的一些基本访问等弄清楚了，下面我们深入的学下表单的属性以及对表单元素的简单操作！

演示一 ： 根据需求，定做表单

你先按下提交提交表单，后退，然后再点修改表单，然后再提交表单，看效果

现在的指向是 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 > 注意，这个表单使用了动作 οnsubmit= &quot; return false &quot; 动作，你可以去掉试下  </ 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 > &nbsp; </ p >
</ body >
</ html >