JS初学者实例教程(6):Document对象读取表单元素

【 tulaoshi.com - Web开发 】

上一篇学习了：Javascript初学者实例教程(5):Document对象

实例六

本实例主要介绍了Document对象读取表单元素的使用

 !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
HTML
 HEAD
  TITLE New Document /TITLE
  SCRIPT LANGUAGE="JavaScript"
  !--
 function firstSubmit(){
 alert(document.form1.a01.value);//将表单名为a01的值显示出来
 }
 function copyFirstSubmit(){
 alert(document.form1.a01.value);
    document.form1.a02.value=document.form1.a01.value;//将表单名为a01的值给a02，取a01的值也可以使用、、、//document.form1.elements[0].value
 }
  //--
  /SCRIPT
 /HEAD
 BODY
  FORM name="firstForm" METHOD=POST ACTION=""
 INPUT TYPE="text" NAME="firstText" value="哈啰"
  /FORM
 
  FORM name="secondForm" METHOD=POST ACTION=""
 INPUT TYPE="text" NAME="secondText" value="哈啰"
 INPUT TYPE="submit" name="hehe" value="哈哈"
  /FORM
  SCRIPT LANGUAGE="JavaScript"
!--
 var first = document.firstForm.name;
 var second = document.secondForm.name;
 //alert("第一个表单的名字："+first);//读取表单元素，将注释去点即可
 //alert("第二个表单的名字："+second);
 //alert("第二个表单的按钮的name是："+document.secondForm.elements[1].name);
 //alert("第二个表单文本域的值："+document.secondForm.elements[0].value);
 //alert("第一个文本域："+document.firstForm.firstText.value);
//--
/SCRIPT
FORM name="form1" METHOD=POST ACTION=""
 a01INPUT TYPE="text" NAME="a01"/INPUT TYPE="button" name="01s" value="提交" onclick="firstSubmit()"/br/
 a02INPUT TYPE="text" NAME="a02"/INPUT TYPE="button" name="02s" value="提交" onclick="copyFirstSubmit()"/×在a01中输入值后再提交
/FORM
 /BODY
/HTML

效果演示：

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"HTMLHEADTITLE New Document /TITLESCRIPT LANGUAGE="JavaScript"!--function firstSubmit(){alert(document.form1.a01.value);//将表单名为a01的值显示出来}function copyFirstSubmit(){alert(document.form1.a01.value);document.form1.a02.value=document.form1.a01.value;//将表单名为a01的值给a02，取a01的值也可以使用、、、//document.form1.elements[0].value}//--/SCRIPT/HEADBODYFORM name="firstForm" METHOD=POST ACTION=""INPUT TYPE="text" NAME="firstText" value="哈啰"/FORMFORM name="secondForm" METHOD=POST ACTION=""INPUT TYPE="text" NAME="secondText" value="哈啰"INPUT TYPE="submit" name="hehe" value="哈哈"/FORMSCRIPT LANGUAGE="JavaScript"!--var first = document.firstForm.name;var second = document.secondForm.name;//alert("第一个表单的名字："+first);//读取表单元素，将注释去点即可//alert("第二个表单的名字："+second);//alert("第二个表单的按钮的name是："+document.secondForm.elements[1].name);//alert("第二个表单文本域的值："+document.secondForm.elements[0].value);//alert("第一个文本域："+document.firstForm.firstText.value);//--/SCRIPTFORM name="form1" METHOD=POST ACTION=""a01INPUT TYPE="text" NAME="a01"/INPUT TYPE="button" name="01s" value="提交" onclick="firstSubmit()"/br/a02INPUT TYPE="text" NAME="a02"/INPUT TYPE="button" name="02s" value="提交" onclick="copyFirstSubmit()"/×在a01中输入值后再提交/FORM/BODY/HTML
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]