Chapter 6: HTML Forms—Interacting with the User

Overview

Web pages would be very boring if we could not interact with the user or obtain information from the user, such as text, numbers, or dates. Luckily, with JavaScript this is possible. 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 wish. In this chapter we'll concentrate on using the information within the web browser, which is called 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, which is called 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 check. The same applies with any Graphical User Interface (GUI) operating system, whether it's a Mac, Unix, or Linux system. 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 15.

All of the HTML elements used for interaction should be placed inside an HTML form. In Netscape 4, it's compulsory for the elements to be inside a form; otherwise they won't be displayed. It's also compulsory if we submit the form to a server, something we'll look at later in Chapter 16. Let's start by taking a look at HTML forms and how we interact with them in JavaScript.