FORMs and their Events

[Total: 0    Average: 0/5]

This file shows how to create a form with any of the available entities of a form. Each type is labeled with a [#] so you can view this source and easily locate the cooresponding HTML for that entity.

Body Code:

<FORM name="everything">
      <TABLE bgcolor="#33AA33" border cellpadding="5">
        <TR>
          <TD><div class=desc>Username:<BR>[1]<INPUT type="text"     name="username" size="15"></div></TD>
          <TD><div class=desc>Password:<BR>[2]<INPUT type="password" name="password" size="15"></div></TD>
          <TD rowspan="4"><div class=desc>Input Events[3]<BR><TEXTAREA name="textarea" rows="20" cols="28"></TEXTAREA></div></TD>
          <TD rowspan="4" align="center" valign="center"><div class=desc>
            [9] <INPUT type="button" name="clearbutton"  value="Clear" ><BR>
            [10]<INPUT type="submit" name="submitbutton" value="Submit"><BR>
            [11]<INPUT type="reset"  name="resetbutton"  value="Reset" ></div>
          </TD>
        </TR>
        <TR>
          <TD colspan="2"><div class=desc>Filename: [4]<INPUT type="file" name="file" size="15"></div></TD>
        </TR>
        <TR>
          <TD><div class=desc>
            My Computer Peripherals:<BR>
            [5]<INPUT type="checkbox" name="peripherals" value="modem"  >56.6K Modem<BR>
            [5]<INPUT type="checkbox" name="peripherals" value="printer">Printer<BR>
            [5]<INPUT type="checkbox" name="peripherals" value="tape"   >Tape Backup</div>
          </TD>
          <TD><div class=desc>
            My Web Browser:<BR>
            [6]<INPUT type="radio" name="browser" value="nn"   >Netscape Navigator<BR>
            [6]<INPUT type="radio" name="browser" value="ie"   >Internet Explorer<BR>
            [6]<INPUT type="radio" name="browser" value="other">Other</div>
          </TD>
        </TR>
        <TR>
          <TD><div class=desc>
            My Hobbies:[7]<BR>
            <SELECT multiple name="hobbies" size="4">
              <OPTION value="programming">Hacking JavaScript  </OPTION>
              <OPTION value="surfing"    >Surfing the Web     </OPTION>
              <OPTION value="caffeine"   >Drinking Coffee     </OPTION>
              <OPTION value="annoying"   >Annoying my Friends </OPTION>
            </SELECT></div>
          </TD>
          <TD align="center" valign="center"><div class=desc>
            My Favorite Color:<BR>[8] 
			<SELECT name="color">
              <OPTION name="red"   >Red    </OPTION>
              <OPTION name="green" >Green  </OPTION>
              <OPTION name="blue"  >Blue   </OPTION>
              <OPTION name="white" >White  </OPTION>
              <OPTION name="violet">Violet </OPTION>
              <OPTION name="peach" >Peach  </OPTION>
            </SELECT></div>
          </TD>
        </TR>
      </TABLE>
    </FORM>
      <TABLE border="4" bgcolor="#33AA33" cellspacing="1" cellpadding="4" align=center>
        <TR>
          <TD align="center"><div class=desc><B>Form elements</B></div></TD>
          <TD><div class=desc>[1] Text</div></TD>
          <TD><div class=desc>[2] Password</div></TD>
          <TD><div class=desc>[3] Textarea</div></TD>
          <TD><div class=desc>[4] FileUpload</div></TD>
          <TD><div class=desc>[5] Checkbox</div></TD>
        </TR>
        <TR>
          <TD><div class=desc>[6] Radio</div></TD>
          <TD><div class=desc>[7] Select (list)</div></TD>
          <TD><div class=desc>[8] Select (menu)</div></TD>
          <TD><div class=desc>[9] Button</div></TD>
          <TD><div class=desc>[10] Submit</div></TD>
          <TD><div class=desc>[11] Reset</div></TD>
        </TR>
      </TABLE>
<SCRIPT type="text/javascript">
function report(element,event) {
 var t=element.form.textarea
 var elmtname=element.name
 if ((element.type=="select-one")||(element.type=="select-multiple")) {
   value=" "
   for (var i=0;i<element.options.length;i++)
     if (element.options[i].selected)
       value+= element.options[i].value+" "
 }
 else if (element.type=="textarea") value="..."
 else value=element.value
 var msg=event+": "+elmtname+' (' + value + ')n'
 t.value=t.value+msg
}
function addhandlers(f) {
 var click_handler  = new Function("report(this,'Click')")
 var change_handler = new Function("report(this,'Change')")
 var focus_handler  = new Function("report(this,'Focus')")
 var blur_handler   = new Function("report(this,'Blur')")
 var select_handler = new Function("report(this,'Select')")
 for (var i=0;i<f.elements.length;i++) {
   var e = f.elements[i]
   e.onclick  = click_handler
   e.onchange = change_handler
   e.onfocus  = focus_handler
   e.onblur   = blur_handler
   e.onselect = select_handler
 }
 f.clearbutton.onclick  = new Function("this.form.textarea.value='';report(this,'Click');")
 f.submitbutton.onclick = new Function("report(this,'Click');window.status='Traped To Not Acutally Submit';return false")
 f.resetbutton.onclick  = new Function("this.form.reset();report(this,'Click');return false")
}
addhandlers(document.everything)
</SCRIPT>

Times Viewed: 1

Leave a Reply

Your email address will not be published. Required fields are marked *