HTML Forms: Interacting with the User - Page 2

Web pages would be very boring if we could not interact with the user, or obtain information from them, such as text, numbers, or dates. Luckily, with JavaScript we can. We can use this information within the web page, or it can be posted to the web server where we can manipulate it and store it in a database if we so wish. In this chapter we'll concentrate on using the information within the web browser, termed client-side processing. In Chapters 14 and 15, we'll see how to send this information to a web server and store it in a database, termed server-side processing.

When using your computer you'll be quite accustomed to various user interface elements. For example, the Windows operating system has a number of standard elements such as buttons you can click, lists, drop down list boxes, and radio buttons you can select from, and checkboxes you can tick. The same applies with any Graphical User Interface (GUI) operating system, whether it's on the Apple Mac, Unix, or Linux. These elements are the way we now interface with applications. The good news is that we can include many of these types of element in our web page and, even better, it's very easy to do so. Once we have such an element, say a button, inside our page we can then tie code to its events. For example, when the button is clicked, we can fire off a JavaScript function we've created.

It's important to note at this point that the elements I'm talking about in this chapter are the common elements made available by HTML, and not ActiveX elements, Java Applets or plug-ins. We'll look at some of these in Chapter 14.

All of the HTML elements used for interaction must be placed inside an HTML form. Let's start by taking a look at HTML forms and how we interact with them in JavaScript.

HTML Forms

Forms provide us with a way of grouping HTML interaction elements with a common purpose together. For example, a form may contain elements that enable the input of a user's data for registering on a web site. Another form may contain elements that enable the user to ask for a car insurance quote. It's possible to have a number of separate forms in a single page. Pages containing multiple forms need not worry us until we are submitting information to a web server - then we need to be aware that only the information from one of the forms on a page can be submitted to the server at once.

To create a form, we use the <FORM> and </FORM> tags to declare where it starts and where it ends. The <FORM> tag has a number of attributes, such as the ACTION attribute, which determines where the form is submitted to, the METHOD attribute, which determines how the information is submitted, and the TARGET attribute, which determines the frame to which the response to the form is loaded.

Generally speaking, for client-side scripting where we have no intention of submitting information to a server, these attributes are not necessary. When in a later chapter we look at programming server pages, then these properties will come into play. For now the only attribute we need to set in the <FORM> tag is the NAME attribute, so that we can reference the form.

So, to create a blank form, the tags required would look something like:

<FORM NAME="myForm">

</FORM>

You won't be surprised to hear that these tags create a Form object, which we can use to access the form. We access this object in two ways.

Firstly, we can access the object directly using its name, here document.myForm.

Alternatively we can access the object through the document object's forms[] array property. Remember in the last chapter we talked about the document object's images[] array, and how we could manipulate it like any other array. Exactly the same applies to the forms[] array, except that instead of each element in the array holding an IMG object, it now hold a Form object. For example, if our Form was the first Form in the page, we would reference it using document.forms[0].

Many of the attributes of the <FORM> tag can be accessed as properties of the Form object. In particular, the name property of the Form objectmirrors the NAME attribute of the <FORM> tag.

Beginning JavaScript
Try It Out: The Forms Array - Page 3