1. אובייקט ה-Form

2. האלמנטים של האובייקט Form

3. נתינת שם ל-Forms והאלמנטים של Form

4. ערכי אלמנט ה-Form

document.forms[document.forms.length-1]

<FORM onReset="return confirm('Really erase ALL data and start over?')">

this.form.elements[4]

<FORM NAME = "questionnaire">
	....
</FORM>
		

document. Questionnaire

document.forms[2]

document.address.zipcode

document.forms[1].elements[4]

document.Questionnaire.favorite[0]
document.Questionnaire.favorite[1]
		

document.forms[0].elements[1].options[2]

<FORM NAME = "everything">      <!-- A one-of-everything HTML form… -->
<TABLE BORDER CELLPADDING = 5>  <!-- … In a big HTML table. -->
  <TR>
    <TD>Username:<BR>
      [1]<INPUT TYPE = text  NAME = "username" SIZE = 15> 
    </TD>
    <TD>Password:<BR>
      [2]<INPUT  TYPE = password  NAME = "password" SIZE = 15>
    </TD>
    <TD ROWSPAN = 4> Input Event[3]<BR>
      <TEXTAREA  NAME = "textarea"  ROWS = 20  COLS=28></TEXTAREA>
    </TD>
    <TD ROWSPAN = 4  ALIGN = center  VALIGN = center>
      [9]<INPUT  TYPE = button  VALUE = "Clear"  NAME = "clearbutton"<BR>
      [10]<INPUT  TYPE = submit  NAME = "submitbutton"  VALUE = "Submit"><BR>
      [11]<INPUT  TYPE = reset  NAME = "resetbutton"  VALUE = "Reset">
    </TD>
  </TR>
  <TR>
    <TD COLSPAN = 2>Filename: 
      [4]<INPUT TYPE = file  NAME = "file"  SIZE =15>
    </TD>
  </TR>
  <TR>
    <TD>My Coputer Peripheral:<BR>
      [5]<INPUT  TYPE = checkbox  NAME = "peripherals"  VALUE = "modem">28.8K Modem<BR>
      [5]<INPUT  TYPE = checkbox  NAME = "peripherals"  VALUE = "printer">Printer<BR>
      [5]<INPUT  TYPE = checkbox  NAME = "peripherals"  VALUE = "tape">Tape  Backup
    </TD>
    <TD>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<BR>
    </TD>
  </TR>
  <TR>
    <TD>My Hobbies:[7]<BR>
      <SELECT  multiple  NAME = "hobbies"  SIZE = 4>
        <OPTION VALUE = "programming">Hacking JavaScript
        <OPTION VALUE = "surfing">Surfing the Web
        <OPTION VALUE = "caffeine">Drinking Coffee
        <OPTION VALUE = "annoying">Annoying my Friends
      </SELECT>
    </TD>
    <TD align = center valign = Center>My Favorite Color:<BR>[8]
      <SELECT  NAME = "color">
        <OPTION VALUE = "red">Red
        <OPTION VALUE = "blue">Blue
        <OPTION VALUE = "violet">Violet
        <OPTION VALUE = "green">Green
        <OPTION VALUE = "white">White
        <OPTION VALUE = "peach">Peach
      </SELECT>
    </TD>
  </TR>
</TABLE>
</FORM>

<DIV ALIGN = center>    <! - - Another table—the key to the one above. - - >
<TABLE BORDER = 4  BGCOLOR = pink  CELLSPACING = 1 CELLPADDING = 4>           
  <TR>
    <TD ALIGN = center><B>Form Elements</B></TD>
    <TD>[1] Text</TD>  <TD>[2] Password</TD>  
    <TD>[3] Textarea</TD>
    <TD>[4]FileUpload</TD>
    <TD>[5]Checkbox</TD>
  </TR>
  <TR>
    <TD>[6] Radio</TD> 
    <TD>[7]Select (list)</TD>
    <TD>[8] Select (menu) </TD>
    <TD>[9] Button</TD>
    <TD>[10] Submit</TD> 
    <TD>[11] Reset</TD>
  </TR>
</TABLE>
</DIV>

<SCRIPT LANGUAGE = "JavaScript1.1">

// This generic function appends details of an event to the big Textarea
// element in the form above. It will be called from various event handlers.
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; 
}

// This function adds a bunch of event handlers to every element in a form.
// It dosen't bother checking to see if the element supports the event handlers, 
// It just adds them all. Note that the event handlers call report() above.
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.onblue = blur_handler;
    e.onselect = select_handler;
  }
  
  // special case handlers for the buttons:
  f.clearbutton.onclick = 
  new Function("this.form.textarea.value = ' '; report(this,'Click');");
  f.submitbutton.onclick = 
  new Function (report(this,'Click'); return false");
  f.resetbutton.onclick = 
  new Function("this.form.reset(); report(this,'Click'); return false");
}

// Activate our form by adding all possible event handlers!
Addhandlers(document.everything);
</SCRIPT>

<SCRIPT id=verifyForm>    
  
  //this function returns true if the string contains only spaces
  function isblank(s)
  { for(var i=0; i < s.length ; i ++)  
    {    
      var c = s.charAt(i);      
      if((c != ' ') && (c != '\n') && (c != '\t'))      
        return false; 
    }     
        return true;
  } 
   
   function verify(f)
   { 
    var msg; 
    var empty_fields = "";  
    var errors = "";
    if( isblank(f.firstname.value) )  
      {empty_fields+="  First name is not filled \n"};
    if( isblank(f.lastname.value) )  
      {empty_fields+="  Last name is not filled \n"};
    if( isblank(f.address.value) )  
      {empty_fields+="  Address is not filled \n"};
    if( isblank(f.zip.value) )  
      {empty_fields+="  Zip code is not filled \n"};
    else  {if ( isNaN(f.zip.value) ){errors+=" Zip code must be a number \n"};};
    if( isblank(f.phonenumber.value) )  
      {empty_fields+="  Phone number is not filled \n"};
    else  { if ( isNaN(f.phonenumber.value) )  {errors+=" Phone number must be a number \n"} };
    if(empty_fields=="" && errors=="") return true
    else msg = "The form was not submmited because of the following error(s):\n";
    msg += empty_fields + errors ;
    alert(msg );
    return false
  }
</SCRIPT>

<FORM onSubmit="return verify(this)">
  First Name: <INPUT Type=text Name="firstname"><br>
  Last Name: <INPUT Type=text Name="lastname"><br>
  Address: <br>
  <TEXTAREA Name="address" Rows=3 Cols=30></TEXTAREA><br>
  Zip Code: <INPUT Type=text Name="zip"><br>
  Phone Number: <INPUT Type=text Name="phonenumber"><br>
  <INPUT type=submit>
</FORM>