Accessing the Elements of a Form

Accessing the Elements of a Form : Form HTML : Form Control JAVASCRIPT DHTML TUTORIALS

JAVASCRIPT DHTML TUTORIALS » Form Control » Form HTML »

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>