Java Reference
In-Depth Information
Remember that because the indexes for arrays start at 0, your loop needs to go from an index of 0 to an
index of numberForms - 1. You enable this by initializing the formIndex variable to 0, and setting the
condition of the for loop to formIndex < numberForms.
Within the
for
loop's code, you pass the index of the form you want (that is,
formIndex
) to
document
.forms[]
, which gives you the
Form
object at that index in the
forms
collection. To access the
Form
object's
name
property, you put a dot at the end of the name of the property,
name
.
Other Form Object Properties and Methods
The HTML form controls commonly found in forms, which you will look at in more detail shortly, also
have corresponding objects. One way to access these is through the
elements
property of the
Form
object,
another collection. The
elements
collection contains all the objects corresponding to the HTML interac-
tion elements within the form, with the exception of the little-used
<input
type=”image”/>
element.
As you'll see later, this property is very useful for looping through each of the elements in a form. For
example, you can loop through each element to check that it contains valid data prior to submitting a form.
Being a collection, the
elements
property of the
Form
object has the
length
property, which tells you
how many elements are in the form. The
Form
object also has the
length
property, which also gives
you the number of elements in the form. Which of these you use is up to you because both do the same
job, although writing
document.myForm.length
is shorter, and therefore quicker to type and less
lengthy to look at in code, than
document.myForm.elements.length
.
When you submit data from a form to a server, you normally use the Submit button, which you will
come to shortly. However, the
Form
object also has the
submit()
method, which does nearly the same
thing.
The
submit()
method submits the form, but it does not fi re the
submit
event of the
Form
object;
thus, the
onsubmit
event handler is not called when submitting the form with
submit()
.
Recall that in Chapter 6 you saw how return values passed back from an event handler's code can affect
whether the normal course of events continues or is canceled. You saw, for example, that returning
false
from a hyperlink's
onclick
event handler causes the link's navigation to be canceled. Well, the
same principle applies to the
Form
object's
onsubmit
event handler, which fi res when the user submits
the form. If you return
true
to this event handler, the form submission goes ahead; if you return
false
,
the submission is canceled. This makes the
onsubmit
event handler's code a great place to do form vali-
dation — that is, to check that what the user has entered into the form is valid. For example, if you ask
for the users' ages and they enter
mind
your
own
business
, you can spot that this is text rather than a
valid number and stop them from continuing.
In addition to there being a Reset button, which is discussed later in the chapter, the
Form
object has the
reset()
method, which clears the form, or restores default values if these exist.
Creating blank forms is not exactly exciting or useful, so now let's turn our attention to the HTML ele-
ments that provide interaction functionality inside forms.
