The following are examples of JavaScript Forms
Understanding Forms
Each time you add a set of opening form and closing form tags to an HTML document, a form object is created. To access one of the forms using JavaScript, you can either use the forms array of the document object, or name the form in the opening form tage and use that name to access the form.
The forms array allows you to access a form using an index number in the array. Each set of form tags on the page will create an additional element in the forms array, in the order in which they appear in the document. Remeber, arrays begin counting with the number 0 (zero) thus making the array look like document.forms(0). So if you want to access a second form, you could use the following: document.form(1). This will work for the rest of the forms on the page, just remember to begin counting at 0. Accessing the form doesn't do anything on it's own. The form you access is an object. To use it, you need a property or method of the object.
Using form names allows you to name the forms on the page that you want to access later. This option can help eliminate any confusion between the document.forms.length and document.forms[x].length because you won't need the latter unless you're trying to loop through each element in each form on the page. In order to use the form name, you must add name="yourname" attribute to the opening form tag on the form you want to access. Replace "yourname" with the name of the form. So the code would look like this: form name="info_form" with the name info_form being the name of the form.
Using Form Names
In the form below, we are simply going to show a fill in the box area. We will also add a line of text below it to show the length property telling you how many elements there are in this particular form.
A simple fill in your name and submit it, 2 elements, text and submit.
Next we are going to make use of more of the properties available to forms. An example could be when you click on the submit button, it will send the form somewhere for webmaster to read. Most forms are sent to a url that has a cgi-bin. This stores the results of the query for the use of the company or persons who own the website. Just for fun, I'm going to put in my email address for you to submit it to. This, right now, does not submit the results of the form, it just has you send me an email.
Now let do a few in a row. We will demonstrate different elements within the boxes themselves.
Ok, so the breakdown goes like this. You started with a text box (name), went to a radio button (course), another text box (graduation year), options (age) and finally a checkbox (cool!).
Next we will show the methods of the reset and submit. So if you wanted to reset the form or submit the form, you simply tell form to do so via the methods. (Note: clicking the submit button will open a new page and it will tell you that the page is not available. That is because the page simply doesn't exist, much like Fed Ex back in the Caveman days!)
Now we would like to show a little about form validation. Validation is extremely useful. For example, you can validate input before it is submitted to help reduce the number of forms with incomplete or inaccurace information.
However, validating forms with JavaScript alone isn't always smart, because the user might have disabled JavaScript on the client side. Still, validation of form data prior to submission to, say, a Common Gateway Interface (CGI) script or a Java servlet can save you time and reduce load on the server.
An easy area to validate is an email address. You want a way to contact the sender, don't you? We will add a function that simply looks at the email address and determine if it is valid or invalid format. The code uses the string method of indexOf() to see if the correct characters are present in the form field. If the characters aren't present, then an alert is shown and the function returns false. Otherwise, it returns true.
Last up will be using forms for navigation. By using JavaScript with forms, you can create some alternatives to the regular text link and image link navigation if you wish. You can use a Select Box Navigation, which allows the viewer to choose a destination from a list in a select box and then go to the new location either by clicking a button or by changing the value. The other option is a Radio Button Navigation. This option is a bit tricker because you want only one radio button to be selected, so you must give each radio button the name to avoid having multiple selections by the viewer. This keeps you from referring to the elements by its name, making it more difficult to code the navigation. However, you can use the elements array to find out which radio button had been slected in place of its name.
We will demonstate the Radio Button, just to be different! Select a button and click GO! Use your back or return in your browser to head back here.