Wednesday, October 1, 2008

Accessing the Elements of a Form



<HTML>

<HEAD>

<TITLE>Multiform Document Example</TITLE>

<SCRIPT LANGUAGE="JavaScript"><!--

function displayFormData() {

 
win2=open("","window2")

 
win2.document.open("text/plain")

 
win2.document.writeln("This document has "+document.forms.length+" forms.")

 
var i=0;

 
var j=0;

 
for(i=0;i<document.forms.length;++i) {

  
win2.document.writeln("Form "+i+" has "+ document.forms[i].elements.length+" elements.")

  
for(j=0;j<document.forms[i].elements.length;++j) {

   
win2.document.writeln((j+1)+" A "+ document.forms[i].elements[j].type+" element.")

  
}

 
}

 
win2.document.close()

 
return false

}

// --></SCRIPT>

</HEAD>

<BODY>

<FORM ACTION="nothing" onSubmit="return displayFormData()">

<H2>Form 1</H2>

<P>Text field: <INPUT TYPE="TEXT" NAME="f1-1" VALUE="Sample text"></P>

<P>Password field: <INPUT TYPE="PASSWORD" NAME="f1-2"></P>

<P>Text area field: <TEXTAREA ROWS="4" COLS="30" NAME="f1-3">Text</TEXTAREA></P>

<P><INPUT TYPE="SUBMIT" NAME="f1-4" VALUE="Submit">

<INPUT TYPE="RESET" NAME="f1-5"></P>

</FORM>

<HR>

<FORM>

<H2>Form 2</H2>

<P><INPUT TYPE="CHECKBOX" NAME="f2-1" VALUE="1" CHECKED>A</P>

<P><INPUT TYPE="CHECKBOX" NAME="f2-1" VALUE="2">B</P>

<P><INPUT TYPE="CHECKBOX" NAME="f2-1" VALUE="3">C</P>

<P><INPUT TYPE="RADIO" NAME="f2-2" VALUE="1">D</P>

<P><INPUT TYPE="RADIO" NAME="f2-2" VALUE="2" CHECKED> E</P>

<P><INPUT TYPE="RADIO" NAME="f2-2" VALUE="3">F</P>

<INPUT TYPE="FILE" NAME="f2-3">

</FORM>

<HR>

<FORM>

<H2>Form 3</H2>

<INPUT TYPE="HIDDEN" NAME="f3-1">

<SELECT NAME="f3-2" SIZE="4">

<OPTION VALUE="">Item 1</OPTION>

<OPTION VALUE="">Item 2</OPTION>

<OPTION VALUE="" SELECTED>Item 3</OPTION>

<OPTION VALUE="">Item 4</OPTION>

<OPTION VALUE="">Item 5</OPTION>

</SELECT>

</FORM>

</BODY>

</HTML>

           


       
Try Online

No comments: