Using JavaScript with forms allows you to get information from the user, and also to output information. First we'll look at inputing.

Just like the links[] array, there's a forms[] array, which works in exactly the same way. The first form on the page is document.forms[0], etc...
And, just like the forms[] array, there is an elements[] array, which works in a similar way. Each form has its own elements[] array, and everything in the form is contained in its elements array. So, the first element of the first array would be document.forms[0].elements[0], etc...

Now, I went through that description a little quickly. The reason is that it's not vitally important. There is another, easier way to do it. You can use names!
For example:

 


Now, to refer to the Text Blank, you'd use document.form1.input1. Every element
of a Form can be given a name, so in most cases, you'll never need the forms[] or
elements[] arrays.


So, now that we can find the individual elements of a Form, how do we "read"
them?

Every element of an array has a property which will allow you to see what information
it currently contains. For Text Blanks and Text Areas it's the value
property. For Radio Buttons and Checkboxes, it's the checked property.

Let's look at an example:

 

This is a pretty simple example of how to use Form properties. When the button
is pressed, whatsit() is called. whatsit() calls alert with the status of each
of the form elements. The "\n" is how you insert a line break.

Notice that for the radio button, we used an array. The reason is that within a
group of radio buttons, each button has the same name. So to refer to a specific
radio button, we have to use an array. The first radio button is NAME[0], etc...


NOTE: The very first thing you should've noticed about this example is the very poor use
of names. While they are cute, there is absolutely no why of telling what a name
refers to without looking at the form and finding the element with that name.
This is a very big no-no.


That's really all there is to reading the data from a Form. Text Areas work exactly
the same as Text Blanks. checked returns true or false, depending on
whether the object is checked. value will always return the text in
the blank.


Now let's look at output. Forms are useful for output because they allow you to
send information to the user on the current page without having to reload it.


To output to a form, we simply assign a value to the value or
checked property as appropriate. Let's look:

 

Again, this is a very simple example of Using forms for output. The Set and Clear
buttons call functions which assign values to the elements of the Form.


Now, let's look at an example which uses Links, input and output, and does
something useful.

 

Now, what we have is something rather unique. It's a link to wherever you want
it to be a link to. When you click the Set button, it sets the link to point to
whatever is in the Text Blank. When you click on the Show button, it displays the
current value of the link.


Here's another very popular example:

 

There isn't much new here. The eval function returns the
numeric value of what it's passed. so eval(document.calculator.enter.value)
returns the numeric equivalent of what you entered in the first Blank.


O.K. That about does it for Forms. There is a wealth of other things you can do
with forms, but most of them are very task specific. What we've just learned is
the most common and useful ways to handle Forms with JavaScript. With what we
just learned, we could write a routine to pre-check a form before submitting it.
For more information on forms check out the
JavaScript
Authoring Guide or the Programmer's Guide.


The next lesson is Advanced.