 |
|
|
 |
 
|
HTML Forms: Interacting with the UserHome > Build > Software > Programming (1) (2) (3) (4) (5) (6) (7) (8) (9) (10) (11) (12) How It Works Within the body of the page we define three forms. Each form is given a name, and contains a paragraph of text. Within
the definition of the <BODY> tag, the window_onload() function is connected
to the window object's onload event handler.
The window_onload() function is defined in a script block in the head of the page. Within this function we loop through the forms[] array. Just like any other JavaScript array, the forms[] array has a length property, which we can use to determine how many times we need to loop. Actually, as we know how many forms there are, we could just write the number in. However, here I'm demonstrating the length property, since it is then easier to add to the array without having to change the function. Generalizing your code like this is a good practice to get into. The
function starts by getting the number of Form objects within the forms array and
stores it in variable numberForms.
Within the for loop's code, we pass the index of the form we want (that is, formIndex) to document.forms[], which gives us the Form object at that array index in the forms array. To access the Form object's name property, we put a dot at the end and the name of the property, name. Other Form Object Properties and MethodsThe HTML elements commonly found in forms, which we will look at in more detail shortly, also have corresponding objects. One way of accessing these is through the elements[] property of the Form object. This is an array just like the forms[] array property of the document object that we have just seen. The elements[] array contains all the objects corresponding to the HTML interaction elements within the form, with the exception of the little used <INPUT TYPE=image> element. As we'll see later, this property is very useful for looping through each of the elements in a form. For example, we could loop through each element checking that it contains valid data prior to submitting the form. Being an array, the elements[] property of the Form object has the length property, which tells us how many elements are in the form. The Form object also has the length property, which also gives us the number of elements in the form. Which of these you use is up to you since both do the same job, although writing document.myForm.length is shorter, and so quicker to type and less lengthy to look at in code, than document.myForm.elements.length. When we submit data from a form to a server, we normally use the submit button, which we will come to shortly. However, the Form object also has the submit() method which does nearly the same thing. It differs in Netscape Navigator since it does not call the onsubmit event handler for the submit event of the Form object. Recall that in the last chapter we saw how return values passed back from an event handler's code can affect whether the normal course of events continues or is cancelled. We saw, for example, that returning false from a hyperlink's onclick event handler causes the link's navigation to be cancelled. Well, the same principle applies to the Form object's onsubmit event handler, which fires when the user submits the form. If we return true to this event handler, then the form submission goes ahead; if we return false then the submission is cancelled. This makes the onsubmit event handler's code a great place to do form validation; checking that what the user has entered into the form is valid. For example, if we ask for their age and they enter "mind your own business" we can spot that this is text rather than a valid number, and stop them from continuing. We'll see this in action when we look at server-side scripting in Chapter 15. As well as there being a reset button, which we will discuss 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 elements that provide interaction functionality inside our forms.
|
||||||||||||||||||||||
|
