JavaScript程序设计基础教程实训指导-8-1 实训案例名称：使用表单elements属性.docx

实训案例名称：使用表单elements属性

1．任务介绍

使用form表单的elements属性来遍历表单中的所有元素。

2．任务目标

学会JavaScript表单elements属性的使用。

3．实现思路

form.elements[0];可获得表单中的第一个字段；

form.elements[textbox1];可获得表单中名为textbox1的字段；

form.elements.length;可获得表单中包含的字段的数量。

4．实现代码

完整代码如脚本8-1所示。

脚本8-1.html

!DOCTYPEhtml

html

head

metacharset=UTF-8

/head

body

formid=myForm

姓名:inputtype=textname=namevalue=王**br

性别:inputtype=radioname=sexvalue=男checked=true男

inputtype=radioname=sexvalue=女女br

年龄:inputtype=textname=agevalue=28br

住址:inputname=addressvalue=山东br

/form

p点击以下按钮，显示form元素中所有元素的数量/p

buttononclick=myFc()按钮/button

pid=demo/p

script

functionmyFc(){

varobj=document.getElementById(myForm).elements;

varlen=document.getElementById(myForm).elements.length;

vartmp=;

vartmp_value=;

for(vari=0;ilen;i++){

if(obj[i].hasAttribute(name)){

tmp+=obj[i].name+;

tmp_value+=obj[i].value+;

}

图8.1任务8-1运行结果}

图8.1任务8-1运行结果

document.getElementById(demo).innerHTML=form元素中有+len+个元素+br元素名称分别为：+tmp+br元素值分别为：+tmp_value;

}

/script

/body

/html

5．结果

单击按钮显示结果如图8.1所示。