Class Demos:

1. in class demo form fields
2. in class demo display form fields
3. in class demo edit fields
4. in class demo drop down list
5. in class demo multiple forms
6. in class demo this keyword and form fields

Forms basically are used to gather information from the user. Just like most HTML tags, forms have a two sided <form> tag. As we have discussed in class, some objects are actually arrays of other objects. The form object is one of them. There can be several forms on a document. To refer to the first form you can use the statement "document.forms[0]". The form itself has an array of elements. You can reference each element on the form using it's elements[] array. For example, the form listed below, to reference the value of the first field we could use "document.forms[0].elements[0].value". Using JavaScript we can reference all the attributs and elements on the a form. The <form> tag has several attributes:

1. form attributes
   • action - normally a URL to a page that will process the form data.
   • method - get or post that tells how to send the data.
     You may have noticed on the address bar of your browser some extra information when you are going from one page to another, especially when you are filling out a form. You may have seen something like http://www.url.com?firstname=chris&lastname=stuff. The information following the question mark is called the querystring. When you use method=get, the elements on the form are placed in the querystring in "name=value" pairs and appended to the URL.
     Take a simple form with two text boxes:

     <form name=myForm action="#" method="get">
     First Name: <input type="text" name="FirstName" size="10" maxlength="15" value="">
     Last Name: <input type="text" name="LastName" size="10" maxlength="15" value="">
     <input type="submit" name="submit" value="submit" >
     </form>
     

     click here to see the demo.
     
     ....class11/simpleForm.htm?FirstName=chris&LastName=stuff&submit=submit
     notice each field on the form is in the querystring.
     Now change the form to method=post, you will see that the querystring is no longer there. With method=post the "name=value" pairs are passed within the html packet to the receiving program in the action field, not on the URL.
     Information passed on the URL can be parsed by javascript in another HTML document.
   • name - the name of the form, this is not necessary however is convenient when you want to refer to a specific form using JavaScript.
     

     methodtype = document.forms[0].method;
     methodtype = document.myForm.method;

   • target - the window where the results returned are to be displayed
   • enctype - the format of the data being submitted
   • length - the number of elements on the form
   • elements[] - the array representing the elements on the form.
2. Basic form tags
   • <input> (this includes hidden fields, radio buttons and check boxes) click here to see the demo.
   • <select> & <option>
     previous example of using a drop down list to go to a search engine click here to see the demo.
     how to dynamically update items in the dropdown list click here to see the demo.
   • <textarea>
     click here to see the demo.
3. ways to submit the form The submit() method is used to submit a form without the use of a submit <input> tag. The reset() method is used to reset a form without the use of a reset <input> tag. Use an event handler to run a function that validates the form.
   • submit
   • button
   • image
   click here to see the demo.