Lesson 1: HTML Forms and Scripts

What Will I Learn in this Lesson?

In this lesson you will learn how to construct HTML forms and extend your knowledge of JavaScript. Forms are used to solicit information from your Web page users and are thus an important tool for making Web pages interactive. Once you learn to create HTML forms, you will continue your study of JavaScript. You will learn features of JavaScript that allow you to write conditional scripts -- scripts that make decisions. You'll then see how such scripts can work with forms to validate the information a user has entered in a form. You will learn to write scripts that provide confirmation that the information entered is of a correct format or request corrected information if the format is incorrect. Of course, all along the way you'll engage in your own activities to reinforce all these concepts in a concrete setting.

What are Forms?

HTML forms are a standard part of HTML -- not just an addition under DHTML. in fact folks have been using forms for quite some time in their Web pages. As you will see, however, DHTML (in particular JavaScript) adds some new capabilities and conveniences in your use of forms. Forms are basically HTML objects that accept user input. This input can take one of several different modes: text entry boxes, radio buttons, check boxes, and popdown menus. These data entry/collection elements can be formatted with many of the usual HTML tags as well, so a form can be interspersed with other HTML constructions and can be nested inside such constructions. In fact, the rules for how forms can nest other tags and be nested within other tags are rather liberal -- the one restriction is that forms can't be nested inside other forms. This doesn't mean you can't have multiple forms on a page, just that they must be separate from each other (nonintersecting).

Forms and Scripts

What does a Web page do with the information collected through forms? This is where scripts come in. There are no built-in features in HTML to actually process the data collected from forms. In fact it wouldn't make sense to even attempt to put this capability in HTML because the purposes users have for collected data are almost endless. So by necessity, users must be able to write their own data processing procedures. These are written using scripts -- forms and scripts go together.

These scripts generally reside on the Web server because they often need to access databases on those servers. The most common type of these server-side scripts are called CGI scripts -- for Common Gateway Scripts. CGI is actually an interface rather than a scripting language and CGI scripts can be written in a number of different scripting languages. Writing and implementing CGI scripts will not be a focus of our work here. Rather we will concentrate on writing client-side scripts. The principles are not that different and if you wish to later learn how to write server-side scripts, you will have a goof foundation to learn the particulars.

Client-side scripts are scripts that are downloaded with a Web page and are executed by the client machine. Server-side scripts execute on the server and require much more information exchange between server and client. For some purposes (like accessing server databases) this is necessary; however, for many tasks client-side scripts can do the job much more efficiently. We will take up the task of writing JavaScript client-side scripts in the next lesson. In this lesson, you will focus on learning how to create HTML forms.

Creating HTML Forms

Constructing a form is straightforward and similar to constructing other parts of a Web page. As we've noted, forms will usually contain a variety of elements -- radio boxes, check boxes, text fields, etc. You will give each element a name as yo create it. These names are used by scripts to identify the information received through the named element.

Let's jump into an example to get started. We'll start with a simple one question form and build it step by step to solicit more information. Take a look at the appearance of the following form before looking at the code. Notice that nothing happens when you make a selection and click the Submit Information button. We'll fix that shortly.

<HTML>
<HEAD>
<TITLE>
Andy's Carmart </TITLE>
</HEAD>
<BODY BGCOLOR
="#FFFFFF">
<CENTER><H2>
<FONT COLOR="#0066FF">Welcome to Andy's Car Market!</FONT></H2>
<HR>
</CENTER>
<P><FONT COLOR
="#0066FF">Tell us something about the car of your
dreams and we'll see if we can find it for you!</FONT></P>
<P><FONT COLOR
="#0066FF">
<FORM ACTION="http://www.some_server.com/cg--bin/action1" METHOD=post NAME=carInfo>
<P>What manufacturer do you prefer?
<SELECT NAME=carType>
<OPTION VALUE=chrysler>Chrysler
<OPTION VALUE=ford>Ford
<OPTION VALUE=gm>General Motors
<OPTION VALUE=honda>Honda
<OPTION VALUE=toyota>Toyota
</SELECT>
<P> </P>
<CENTER>
<INPUT TYPE=submit VALUE = "Submit Information">
</CENTER>
</FORM>
</FONT></P>
</BODY>
</HTML>

Notice the enclosing paired <FORM> tags. The first <FORM> tag has two attributes. The first ACTION is used to define the CGI script that will process the data (this is just a placeholder for us since we are not discussing CGI scripts). The second METHOD will have one of two values: post or get -- depending on how you want the browser to package/format the data you're sending to the CGI script. This is not an issue for us, so we'll just use the post method in all our forms.

A pulldown menu is defined by the paired <SELECT> tag inside a form. The <SELECT> tag will enclose a number of <OPTION> tags to define the particular entities to appear in the pulldown menu. Each <OPTION> tag will contain a VALUE attribute which will specify what the selection will be called when scripts access the choice entered from this menu. The text outside the tag is what the user will see as his or her selection choice. The VALUE and this name may differ since we might want to give the user a more complete description than we pass to the script. In this case, we've made these the same in most cases, except we haven't used any capital letters in the VALUE attributes. The exception is that we shortened general motors to just gm in that VALUE attribute. It is important to use exactly these attribute values in our scripts -- the scripts won't care what we use a text for the users.

Finally, the <INPUT TYPE=submit> tag creates the submit button. The value of the VALUE attribute is the name that shows up on the button in the user's window. When the user clicks the submit type button, the browser will ordinarily engage the script stored in the ACTION attribute for the form. However, we can add additional actions or override this action by including our own onSubmit event handler. You'll see an example of this very shortly.

How would a script access the information entered. The form is an object, so the dot syntax is used. The value entered is referred to as:

document.carForm.carType

Look at this name carefully and make sure you understand the "double dot" syntax. This says that the value of carType (our pulldown menu's name) belongs to the object carInfo (our form's name), which in turn belongs to the document object.

Notice that the names carInfo and carType were defined by us when we wrote the HTML code for the form. We could use any names we like for these. In general though, you should choose meaningful names that reflect the actual entity they represent. Notice that we are using a naming convention that says when two words are combined in a variable name, put the first one in lower case and then start the second one with a capital letter. This is the convention for variable names in JavaScript. The languages is case sensitive -- meaning that the names carinfo, carInfo, CarInfo, and Carinfo are all different names. By the way, this naming scheme is only a convention -- meaning that you don't have to follow it. however, it will make your scripts much easier for others to read (and yourself when you return to a script you wrote months ago) if you do adopt the convention. Most JavaScript programmers do use this convention, making their scripts easier for you to read as well!

Now, how would we include our own script to process the information submitted when the submit button is pressed. As we mentioned above the onSubmit event handler will do the trick. Here's an example of a JavaScript script that prints a simple message when the button is clicked confirming that a choice is made. Take a look at how this works before reading the code.

Here's the code. Of course, the script and the event handler onSubmit work hand-in-hand. The script for the event handler consists of two statements. First the function to display the message is called, then the value false is returned. Returning false stops the browser from trying to execute the rest of the tag -- so the fact that our ACTION file is a phantom won't be discovered :-)

<HTML>
<HEAD>
<TITLE>
Andy's Carmart </TITLE>
<SCRIPT TYPE = "text/javascript" >
function confirmType()
{window.alert("Thanks. We're working on finding you a car.")
return true
}
</SCRIPT>

</HEAD>
<BODY BGCOLOR
="#FFFFFF">
<CENTER><H2>
<FONT COLOR="#0066FF">Welcome to Andy's Car Market!</FONT></H2>
<HR>
</CENTER>
<P><FONT COLOR
="#0066FF">Tell us something about the car of your
dreams and we'll see if we can find it for you!</FONT></P>
<P><FONT COLOR
="#0066FF">
<FORM ACTION="http://www.some_server.com/cg--bin/action1"
onSubmit = "confirmType(); return false;" METHOD=post NAME=carInfo>
<P>What manufacturer do you prefer?
<SELECT NAME=carType>
<OPTION VALUE=chrysler>Chrysler
<OPTION VALUE=ford>Ford
<OPTION VALUE=gm>General Motors
<OPTION VALUE=honda>Honda
<OPTION VALUE=toyota>Toyota
</SELECT></P>
<CENTER>
<INPUT TYPE=submit VALUE = "Submit Information">
</CENTER>
</FORM>
</FONT></P>
</BODY>
</HTML>

Activity 1: Creating an Interactive Form

There's more to learn about HTML forms, but first it's time for you to practice what you learned so far about forms, associated scripts, and creating interactive Web pages. In this activity, you'll create a page with a form that provides a simple response to the user. We'll enhance this in the next lesson.

Here's your task:

  1. Create a new folder on your disk and name it forms1.
  2. Create an HTML document named books1.htm and save it the forms1 folder.
  3. It's okay to use Dreamweaver to create the basic page, but you should code the form and the script using Dreamweaver's HTML view.
  4. Your document should have the following characteristics:
    * The page will collect information about the kinds of books the user is looking for.
    * It will present two pulldown menus:
    One will ask for the type of books (fiction, history, etc.)
    The other will ask the level (beginner, intermediate, advanced, expert)
  5. When the user submits his or her information, a display box (alert box) will appear saying that the information has been recieved and a search for candidate books is under way.
  6. View the document in a browser to check that your pulldown menus are displaying as you intended and that your script works properly. Correct any errors you find. Once again, use both Netscape Navigator and Internet Explorer if both are available and note any differences you observe.

** End of Lesson 1 **