Forms Tutorial

download Forms Tutorial

of 49

  • date post

  • Category


  • view

  • download


Embed Size (px)

Transcript of Forms Tutorial

Forms TutorialLet's look at a very simple form:

this code favorite color: This form has all the required elements for a form:

produces this favorite color:rea

Start the form here. The ACTION attribute, which is required with every tag, is used with CGI, discussed below. Data entry field. creates most types of form fields, but and also create certain types. End the form here. Of course, this form doesn't do much. You can type something into the one field, but that's it, nothing happens from there. In the next section, we expand the form a little.

Hi There!

Forms and ScriptsUntil scripting for web pages came along, CGIs were the only way to process form data. Now that Javascript is available on most web browsers, scripting provides a whole new avenue of neat ways to use forms. Unlike with CGI, forms that use scripts process the information immediately and can return the results right to the current web page. Script-based forms can also react to events other than just the user pressing a "Submit" button. An example of a script-only form is small form which sets the color of the current web page:

this code White Red Green Blue

produces thisWhite

A more extensive example is this form which calculates the properties of various geometric figures:

Circumference and Radius of a Circle circumference: radius: area:

Surface Area and Volume of a Cone radius: height: surface area: volume:

Surface Area and Volume of a Sphere surface area: radius: volume:

This form also demonstrates that even a relatively simple script-based form requires lengthy script coding. Take a look at the source code for this form.

Forms and CGIThe original and still most popular use for forms is in conjunction with CGI (Common Gateway Interface). In the CGI way of doing things, the data the user enters is sent to the web server, where a program processes the data and returns the results. In other words, all the data is processed on the server, not in the web browser. Let's expand our earlier example to show how to incorporate CGI: favorite color: which gives usSubmit

favorite color:

Here's what the new pieces mean: ACTION tells the browser where to send the data for processing (more on that shortly). ACTION is required with every form, even forms that don't use CGI. We've added the NAME attribute. NAME identifies each field, "names" it so it can be referred to later. This tag creates the "submit" button, which the user presses to send the form to the web server. That's the basic set up for a CGI form, but what happens after the user presses Submit? Consider, for example, this simple form:

Join our mailing listName: E-mail:Submit

Here's the chain of events when the user hits "Submit":

1. When the user presses Submit, the browser sends the form data to the web server. 2. The web server launches the CGI program which was written to process this form. 3. The CGI program does whatever it does with the data. The program might consult a database, perform calculations on the data, use the data to add the user to a mailing list, whatever the programmer wants it to do. Whatever else the program does, it generates a web page using HTML so the user can see the results of submitting the form. 4. The CGI program passes the HTML back to the web server. 5. The web server passes the HTML back to the browser. So there are three pieces to the CGI process: the form on your web page, the web server, and the CGI program. This guide deals with the first part: how to use HTML to make a form. Your web administrator handles the web server, and for a good guide on how to write CGIs, we recommend James Marshall's excellent (and short) CGI Made Really Easy. NOTE: If you want to get started writing HTML forms but don't have a CGI set up yet, you can use our publicly available CGI at ../cgibin/ This CGI will produce a web page of all the fields sent to it, so you can see if the forms work the way you intended. Most of the forms on the rest of this page will use this CGI. Technically speaking there is no such thing as "a CGI". "CGI" is a standard protocol, not an actual implementation. However, it has become common to refer to a program which uses the CGI standard as "a CGI", and we will follow that custom here. One of the reasons CGI is so popular is that the CGI program can be written in just about any programming language: C, C++, Perl (the most popular language for CGI), Visual Basic, etc. CGI was designed to allow great flexibility in processing the form data, while still allowing the results to be returned as HTML (or other formats, but HTML is the most popular).

Rollover Submit ImageHTML allows us to use images to create submit buttons for forms. Unfortunately, creating a rollover submit image can be a little more tricky. The technique described here allows you to create a rollover submit image using a script which does most of the work for you. Suppose we want to use these two images to make a submit rollover. The first is the image which is displayed when the mouse is not over the image, the second when the mouse is over the image.

submit.out.gif submit.over.gifFirst, copy this script into your page. Copy as-is without changing anything:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15


which gives us this form:

email: Most of the form is as normal. Where we would have put the submit button we put some JavaScript instead. Our script has only two commands. The first command at line 6 creates a new submitroll() object and takes three parameters. The first parameter ("submit.out.gif") sets the source for the image which is displayed when the mouse is not over. The second parameter ("submit.over.gif") sets the source for the image which is displayed when the mouse is over. The last parameter ("mysubmit") gives the image a nickname which is used by the script. The next command at line 7 writes out the HTML and JavaScript to create the image. We follow the script with a short element for browsers which don't have JavaScript. This technique covers all the bases, creating a rollover submit image without a lot of hassle. In the next page we'll discuss a few optional settings you can add to the script.

Rollover Submit Image: Other SettingsBy default, all the rollover submit script requires is the sources of the "over" and "out" images and a nickname for the image. The script allows you to set a few other optional settings as well: email:

email: The code here is almost the same as in our previous example. This time we've just added a few lines. By default the alternate text for the image is Submit Query. In our example above, sr.alt="OK"; sets the alternate text as "OK" to match the text in the image. sr.width=60; and sr.height=60; set the width and height of the image. Finally, the script gives an opportunity to add some attributes to the tag. In this the form looks better if the text field is aligned with the top of the image instead of the bottom so we add sr.otheratts="ALIGN=TOP";.

Image as a Reset ButtonHTML allows you to use an image as a submit button, but it doesn't provide for images as reset buttons. We can work around that limitation, however, with a little JavaScript. The technique described here allows you to easily create a reset image button. This technique only requires you to write a few lines of code. First, copy the following JavaScript exactly as-is into your web page. Don't change anything.

Now, suppose we want to use this image as our reset button:

We'll create our form with this code:

Which gives us this form:

In the previous section we showed you how to create a rollover submit image. In the next page we'll show you how to create a rollover reset image. We'll also explain how to set some of the optional settings.

Rollover Image as a Reset ButtonThe script in the previous page allows you to easily create a "reset image" button. As long as we're creating a reset image, it's only a small step to make into a rollover reset image. Here's how. and Suppose these are the two images we want to use for our rollover: way as in the previous example adding only two lines of code to make it a rollover: . We create the reset image the same

Which gives us this form:

(You may notice that we also that we set the submit button as a rollover using the Rollover Submit Image technique.) We set the "mouseout" image as the regular image for the reset. To add the rollover, we first give it the image a name. In our example we name the image "resetter" with the command = "resetter";. You must give the image a name or script will fail to generate the necesary code. We then indicate the source of the "mouseover" image with the command ri.rollover = "reset.over.gif";.

Reset Image: SettingsThe image reset provides for a some options on how the image is displayed.

By default the script checks if the user really wants to reset the form (usually a good idea, see RESET). If for whatever reason you don't want this confirmation then set the confirm property to false: ri.confirm=false;. You can specify the width, height, and alternate text of the reset image with those corresponding properties: ri.alt="reset!";, ri.width=70;, and ri.height=22;. Finally, if you have any HTML attributes you want added to the tag you can set those with the otheratts property. In our example we set the alignment with ri.otheratts = "ALIGN=TOP";.

Sound FormatsThere are many computer formats for sound, and theoretically any of them could be used in a web page. The three most popular formats (those most likely to work on your readers' machines) are WAVE, AU, and MIDI. WAVE (Waveform Audio File Format, with the file extension .wav) was invent