Be sure to visit the FREE CGI Script Archive!

This tutorial is meant to introduce HTML authors to composing forms for use with CGI scripts and programs. Most of the popular tags are here, so if you already have some FORMS experience, you may still find this a useful reference. Your biggest challenge may be getting funform.cgi to run on your server. It may take some trial and error, but once you get it running, all of your other CGI scripts will be much easier. Patience is the most important resource you will need. Hey, some virtues do have their rewards... But first... If you have been following the Most Simple Intro to CGI Series, this is the installment on creating FORMS for use with your web pages. You should have a basic understanding about what makes CGI different from simple HTML, and maybe you have even written your first program. To enhance your learning experience in developing FORMS, I created a small CGI program that you should download and install. This script, will take any form and present the submitted information on an HTML page so you can check the result. After downloading, this file, please return to this page! Be sure to read the instructions contained in the README file as well as those in the script itself. The program requires you to make a minor change to activate the e-mail function. Also, if you are using an editor under Windows, be sure to save funform.cgi with the extension .cgi Not .txt (an extension is the part of the file name after the period ".") DOWN LOAD FUNFORM.CGI This link will take you open your file save window. You can then unzip the file and upload it to your server following the included directions. If you wish to view the script and readme file, click here. Please note that this simple script may not meet all of your needs. For more advanced form handling, take a look at BNBFORM.CGI. The program actually serves two functions. You can use it as a tool to make sure your form actually works, and secondly you can have it send e-mail to a person that you designate in the form itself. More on that later. Also included with the program is a simple e-mail response type form called funform.html. You can use that to test your installation of the CGI script. Once you have mastered the design and creation of forms, and are able to process their information, you are well on your way to becoming a true webmaster. If you ever wondered how to use a pop-up imagemap in conjuction with a text input field, have a look at this. Our Objectives To discuss ways of arranging the form on the screen. To create a simple form that uses all of the common devices of an HTML FORM. To understand the when's and why's of deciding what type of devices to use depending on what we are asking of the reader. To be able to handle the information collected by the form using our FUNFORM.CGI script. Not a real form, just an amazing simulation! You call this a simple form? This is our handy, all-purpose favorite radio station and pet ownership survey. In my humble opinion- rather typical of the type of information a lot of web sites ask for. This is also probably very representative of what you are trying to accomplish. Okay, so maybe not the same exact questions... I hope... This of course is the finished product. What is special about this form is that it contains examples of the HTML FORM's major food groups, conveniently diced up into digestible pieces. You'll see- its actually pretty simple, and guaranteed not to cause heartburn. I promise. Designing our form. My guess is that you probably have tried to create a form already, and have noticed that it is fairly impossible to get a nice clean layout using The <BR> and <P> tags. This is because the browser is using proportional spacing. This means that a W uses more space than an i to display. The browser also ignores any extra spaces you might put in to try and pad things in an effort to align your form elements. There are two ways around this problem. Tables. You can place your various form elements in a table, or tables if needed. This is a good way to format your form, but it also adds complexity and increases your chances for creating hard to find bugs. <PRE></PRE> Tags. This method tells the browser to accept your formatting as entered. You do not use the <BR> or <P> tags to start a new line, just enter a new line! Also, it will use leading spaces as well as spaces between words to make your attempt to line things up work as you intend. This is accomplished by having every character, no matter how wide or narrow, use the same amount of space. For the purposes of this tutorial, we will be using the <PRE> method of formatting. In creating our example form, the main difference between my presentation, and what your source code will do, is that each element on your form will be on its own line. This is okay. I always place each element alone until I am all done. It makes debugging and editing easier! Again- trust me.... Most of the source code examples on this page are done using the <PRE> tags, so you will get a good idea of what the effect is. In designing our form, the most important step is to figure out what information we want to collect. After this has been taken care of, we want to group and place the items into some logical order. In the example above, we get information about the person, the questions we want answered, and lastly any comments they might have. This is a pretty standard way of doing things. Introducing the <FORM>. As with most things in HTML, a structure starts with an opening tag, and ends with a closing tag. With forms, these tags are <FORM> and </FORM>. <FORM METHOD="POST" ACTION="/cgi-bin/Funform/funform.cgi"> </FORM> In the example tags above, you will notice there are two major things in our opening tag: METHOD. The method can be set to either POST or GET. The difference between the two has to do with the way the information is sent to the cgi program. Always use the POST method. Believe me, you will avoid certain system problems if you follow this advice. ACTION. This tells the form, what program should be executed by the server when the form's data is submitted. The path to your cgi-bin directory will vary from system to system. Always check with your system administrator if you do not know where to put or how to call up your cgi programs This is all you need to know to both start and end your form. Of course, we still have to do the filling. Who wants to eat just crust? Somethings have to be done from the outside in... It is always nice in life to be able to explain something from the top to the bottom in just that order. Guess what? Not this time. We must actually start with the top and the bottom at the same time. The source code below illustrates what we need to both start and end our form. All of our work from this point on will be inserted sort of into the middle! What we are going to do is first set up the source code required to open and close our form, including our little Action buttons. Ever wonder why most form buttons look alike? It's because your browser actually creates them! The HTML code below will create a basic form with two buttons. Sorry about the funny left justify down below, but it is to make your cut and paste easier! If you want to wait, the entire source code will be at the end of the tutorial, all in one big piece. <FORM METHOD="POST" ACTION="/cgi-bin/Funform/funform.cgi"> <PRE> <INPUT TYPE="SUBMIT" VALUE="Send Mail!"> <INPUT TYPE="RESET" VALUE="Clear-Form"> </PRE> </FORM> The Control Buttons Now we have something to look at. Notice that our <PRE> tags are between the <FORM> tags. This is to make sure that our form ends up looking just the way we draw it. At this time you are also being introduced to the <INPUT> tag. The <INPUT> tag is all self-contained and has no closing tag, as is the case with the <IMG> tag. There are several types of <INPUT> definitions we can use. Taking a look at the first two: TYPE=SUBMIT This type of INPUT, tells the browser that the information has been entered (maybe), and that the user wants to transmit the information to the server. If you do not want to say "Send Mail!", just change the VALUE to whatever you like and the browser will make the proper button for you. TYPE=RESET This INPUT tells the browser that the user wants to clear all of the fields and start over again. As with SUBMIT, you can change the button name by changing the VALUE. You can also use a graphic file for your SUBMIT button. Interested? Take a brief detour. The rest of this page will be explaining the other input types as we build up our form project. The Pulldown Selections Box Our next piece of source code is what creates the pulldown selector for Salutation. The Selections type of input is great for when you want to give a person a choice of several options, but do not want to consume a lot of screen space doing it. They are best also, when the user would be expected to know roughly what choices would be contained it it. Here is our <SELECT> tag example. Cutters and Pasters, just stick this under the <PRE> tag towards the top of the example source. Salutation <SELECT NAME="salutation"> <OPTION VALUE="">None <OPTION VALUE="Mr.">Mr. <OPTION VALUE="Mrs.">Mrs. <OPTION VALUE="Ms.">Ms. <OPTION VALUE="Miss">Miss </SELECT> The selection box starts with a <SELECT> tag and ends with a </SELECT> tag. Here are the important things to know: NAME is what the selected choice is assigned to. If you have been following the Simplest Intro To CGI Series, you will remember that our program uses holders called variables to store information. In this case, the variable salutation can be either Mr., Mrs. Ms., Miss, or blank. OPTION is what value ends up being assigned to the selector's variable. The part within the <OPTION> tag is what is sent to the server. The part outside is what is displayed on to the user. If you look carefully, you will see that even though the screen says None, the VALUE is really empty. Here is a useful trick. Let's say you know most of your readers like to be called "Ms.", what you can do is present the tag as follows: <OPTION SELECTED VALUE="Ms.">Ms. Adding the magic word SELECTED tells the browser that you want that OPTION to be the default one. Of course the reader can always change it to whatever they want. The TEXT TYPE of INPUT This is the most simple and straight foward type of INPUT TYPEs. Actually it's where most lessons start, but not mine! Hey you're here, so there must be a reason, right? The source to create this (and the e-mail address) is as follows: First Name <INPUT TYPE="TEXT" NAME="first_name" MAXLENGTH=15 SIZE=15> Last Name <INPUT TYPE="TEXT" NAME="last_name" MAXLENGTH=20 SIZE=20> E-Mail Addr <INPUT TYPE="TEXT" NAME="E_MAIL" MAXLENGTH=35 SIZE=35> This should be fairly straight foward. NAME is the variable or container that the information will be held in when the server gets it. MAXLENGTH is the maximum number of characters that the field will hold. If it is greater than the SIZE, then the text will scroll across as the person types. This item is optional SIZE is the physical size of the field on the screen in number of characters. This item is optional. The TEXT type of input is ideal for things that only the user can tell you and that you cannot try to anticipate- like their name, address, and so on... The RADIO TYPE of INPUT What else would I use for examples of the RADIO input type, but New York and Long Island Radio stations? Of course they are rock stations! The Radio INPUT works exactly like the radio station selector in your car radio. Only ONE button can be pushed in at a time. Please do not try to prove me wrong, all you will do is damage your radio. Do I need a disclaimer here? Favorite Station <INPUT TYPE="radio" NAME="fav_radio" VALUE="WPLJ">WPLJ <INPUT TYPE="radio" NAME="fav_radio" VALUE="WLIR">WLIR <INPUT TYPE="radio" NAME="fav_radio" VALUE="WZRK">WZRK <INPUT TYPE="radio" NAME="fav_radio" VALUE="WBAB">WBAB <INPUT TYPE="radio" NAME="fav_radio" VALUE="WNEW">WNEW <INPUT TYPE="radio" NAME="fav_radio" VALUE="NONE">NONE The way you group a set of radio buttons together (as far as the browser and server are concerned) is by giving them the same NAME. This is the most important fact to have sink in. The physical placement on the page does not matter- only the NAME holds them together. NAME is the variable or container that the VALUE will be sent to the server in. VALUE is what you want the NAME to be equal to if the reader chooses that button. The text outside the tag is what the reader sees next to the button. RADIO INPUTS are great when you have a few choices to present, you want the reader to see all of them- and they can only pick one option. Do not use this for multiple choice, that is what the CHECKBOX TYPE is for. The CHECKBOX TYPE of INPUT The CHECKBOX INPUT is a way of allowing a reader to make a ON/OFF type selection without having to do anything but click the mouse. The structure of this looks very much like the RADIO but they are in fact- very different. Family Pet <INPUT TYPE="CHECKBOX" NAME="dog_owner" VALUE="owns_dog">Dog <INPUT TYPE="CHECKBOX" NAME="cat_owner" VALUE="owns_cat">Cat <INPUT TYPE="CHECKBOX" NAME="bird_owner" VALUE="owns_bird">Bird <INPUT TYPE="CHECKBOX" NAME="cow_owner" VALUE="owns_cow">Cow It is essential that you see each entry has a different NAME. Do NOT assign more than one CHECKBOX to a NAME or you will really give your cgi program major indigestion. BURP! Here are the essentials: NAME is the variable or container that the VALUE will be sent to the server in. VALUE is what you want the NAME to be equal to if the reader marks that CHECKBOX. The text outside the tag is what the reader sees next to the CHECKBOX. CHECKBOX is a good way to allow people to answer to having more than one of a related group of selections. Pets, hobbies, magazines, etc. are good types of data to gather using this method. The <TEXTAREA> Tags The <TEXTAREA> tag also requires the </TEXTAREA> tag as a closing. Using this tag adds great power to your forms- it lets the reader supply their own words. This is great for any type of feedback form, and an obvious essential for an e-mail format form. Comments <TEXTAREA NAME="question" WRAP=VIRTUAL ROWS=2 COLS=60> </TEXTAREA> NAME is the variable or container that the contents of the TEXTAREA will be sent to the server in. ROWS are the number of physical rows on the screen. The reader may scroll up and down. COLS The physical width of the entry area. When the reader types close to the end of the area, the cursor drops to the start of the next line. This is called wrapping. WRAP is how to treat the wrapped text. VIRTUAL means that the browser formats the text, but no actual line feeds or carriage returns are sent to the server. I tend to use VIRTUAL. Your other options are OFF which means no wrapping and PHYSICAL which places the line breaks in the data. Of course, once you use this type of data element, you will actually have to read what people write you! The HIDDEN INPUT TYPE On the surface, having inputs that the user cannot see may seem sort of pointless, but it actually is a very powerful tool in HTML and CGI programming. Using hidden fields allows you to pass information to your CGI script which you need, but the reader does not have to see. More importantly- it can be data you do not want the reader to be able to change. It should be noted that the reader could edit your HTML code and change the HIDDEN fields. Why? Who knows. I just thought you should be aware of the possibility. Also, this means that the reader can see the source code- DO NOT HIDE things like passwords or login names in a HIDDEN field!!!! Our FUNFORM.CGI program looks for the two names below when it works with a form. Be sure to include them in your FUNFORM.CGI forms. The HIDDEN INPUT looks like this. <INPUT TYPE="HIDDEN" NAME="FORM_NAME" VALUE="THE TEST FORM"> <INPUT TYPE="HIDDEN" NAME="MAIL_TO" VALUE="person@to-get.mail.com"> NAME is the variable or container that the VALUE will be sent to the server in. VALUE is what you want the NAME to be equal to. Of course, do not use the same name twice with two different values! The PASSWORD INPUT TYPE The PASSWORD input works the same as the TEXT type, except that that the user's typing is masked with asterisks. (*****) This is useful for hiding passwords and PIN numbers from casual prying eyes, but it is important to know that the information being sent is NOT encrypted, but is clear text. This is especially important to know if you are using the GET method of calling your script. The PASSWORD INPUT looks like this. <INPUT TYPE="PASSWORD" NAME="mypasswd" SIZE="8" MAXLENGTH="8"> Putting it all together The following is the actual source listing for our example form. Since we are using <PRE> formatting, you will note that some of the lines are VERY long. This is why I said early on that you should create your forms a line at a time, then join the lines together when you are all done. <FORM METHOD="POST" ACTION="/cgi-bin/Funform/funform.cgi"> <PRE> Salutation <SELECT NAME="salutation"> <OPTION VALUE="">None <OPTION VALUE="Mr.">Mr. <OPTION VALUE="Mrs.">Mrs. <OPTION SELECTED VALUE="Ms.">Ms. <OPTION VALUE="Miss">Miss </SELECT> First Name <INPUT TYPE="text" NAME="first_name" MAXLENGTH=15 SIZE=15> Last <INPUT TYPE="text" NAME="last_name" MAXLENGTH=20 SIZE=20> E-Mail Addr <INPUT TYPE="text" NAME="E_MAIL" MAXLENGTH=35 SIZE=35> Favorite <INPUT TYPE="radio" NAME="fav_radio" VALUE="WPLJ">WPLJ Radio <INPUT TYPE="radio" NAME="fav_radio" VALUE="WLIR">WLIR Station <INPUT TYPE="radio" NAME="fav_radio" VALUE="WZRK">WZRK <INPUT TYPE="radio" NAME="fav_radio" VALUE="WBAB">WBAB <INPUT TYPE="radio" NAME="fav_radio" VALUE="WNEW">WNEW <INPUT TYPE="radio" NAME="fav_radio" VALUE="NONE">NONE Family Pet <INPUT TYPE="checkbox" NAME="dog_owner" VALUE="owns_dog">Dog <INPUT TYPE="checkbox" NAME="cat_owner" VALUE="owns_cat">Cat <INPUT TYPE="checkbox" NAME="bird_owner" VALUE="owns_bird">Bird <INPUT TYPE="checkbox" NAME="cow_owner" VALUE="owns_cow">Cow Comments <TEXTAREA name="Question" wrap=virtual rows=2 cols=60> </TEXTAREA> <INPUT TYPE="submit" VALUE="Send Mail!"> <INPUT TYPE="reset" value=" Clear-Form"> <INPUT TYPE="HIDDEN" NAME="FORM_NAME" VALUE="THE TEST FORM"> <INPUT TYPE="HIDDEN" NAME="MAIL_TO" VALUE="person@to-get.mail.com"> </PRE> </FORM>

Find or Give Help on the BBS
Home Top E-Mail
If it looks great, it's by Christine

---