The goal of the Form presented in Eric Sasson's form demonstration page is to collect information, mail it to the owner, and make a log file of all forms submitted that can be viewed on the Web.
The first thing you will see on the page is a list of terms that are defined in AllForms.pl (a general script we wrote to process our forms). The terms are pretty self-explanatory, and are used in the HTML code, which will be explained below. Once you make a small form, you can experiment and see how these different categories can be used.
Further down the page is the code from our a sample form we used to order lunch during the institute. (The link for the actual form is at the top of the page). You'll notice that we changed the <> brackets in HTML to  brackets so that you could see the code on the Web page. If you want to copy our actual HTML, go to the link to the actual lunch form at the top of Eric's demonstration page and use your browser's menu option for viewing the document source.
The first section of the page is just regular HTML. The Form stuff starts where it reads:
One idea from this point on is to copy that source code so you can modify the fields to practice your own form page. To do this, go to the link at the top of the page and choose 'document source' from the View menu at the top. MAKE SURE YOU CHANGE ANY GENERIC INFORMATION IN THE FORM before you try to use it.
The first parts of the form are short fields for the user to type in their: Name and Email Address. In [INPUT ...] the SIZE is the length of the box in which the user will be typing, and NAME is the name of that field. This NAME can be one of the defined names above (and thus will do special things acording to AllForms.pl), or it can be a name you define (anything).
You can also have TYPE="hidden" in the INPUT tag, which means that you define what it is; the user does not see or get to change it. This may be useful for any number of things (as you can see from the sample). We have a field defining the email address we want it sent to: . . . And we have fields defining what will be returned to the user after submitting and what goes into the log file.
You can also make a TextArea that has scroll bars so that the user can type in a lot of text (as in comments, etc.). This is done using the [TEXTAREA ..] tag. Also notice how you can give users different methods for selecting options. The lunch form includes a pop-up menu and checkboxes.
The last two lines in the FORM section, "submit" and "reset," let the user either submit the form or clear it. These should not be changed, except to replace what is written on the button (Submit your answer, Start Over)
Then of course there is the tag to end the form section.
The best thing to do now is to try making your own form, using the same basic elements but starting with one you have downloaded - add and subtract sections, etc. Have some fun.
If you're writing Web pages and would like to include forms, we'd really like to help you. Let us know when you have a form written up, and we'll see about getting you set up with an appropriate script.
(For additional Forms Tutorials, try the Web Developers Virtual Library.)
- Mike Morton & Eric Sasson
Home || The Math Library || Quick Reference || Search || Help