实在
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= " 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 >
<! 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= " 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 >