All forms begin with the opening form tag below. The opening tag and its contents are hidden from view.
All forms will end with the closing form tag </form>. This tag must be placed at the END of the form.

The following opening form tag is a typical example that points to the popular cgi form mail handler FormMail located in a cgi-bin directory in the root web directory.

(This is the opening form tag)
<FORM ACTION="http://www.anywhere.com/cgi-bin/form-mail.pl" METHOD="POST">

All form input fields like check boxes, radio buttons, text fields, drop down selection lists etc. go here, between the two form tags.

(This is the closing form tag)
</FORM>

1. The action tag tells the web browser what to do with the information that has been gathered in the form. In the code above, the "Action" attribute directs the information collected in the form to the forms handling CGI "form-mail.pl" Located in the cgi-bin directory. This is one of the most popular cgi's in use. It takes the information submitted by your visitor in the form and emails it to you in delimited, left justified format.
2. The exact location of the cgi-bin directory will be determined by the rules regulating CGI usage at your ISP. Some ISP's allow you to set up CGI's in a cgi-bin directory in your own root web directory. Others restrict your ability to run free lance cgi's and will have a pre built cgi-bin directory on the web server. In this case, you will need to get the path to the cgi-bin directory from your ISP.
   
   
3. The METHOD attribute will almost always be "POST."
4. The other METHOD is "GET." It limits the number of characters that can be passed from the form to the cgi to 8,192 which would work with most forms but, to be sure and not have to think about it, use the POST method. The documentation that comes with any given CGI script will tell you which METHOD to use.
5. In this case, the form information is being submitted to a CGI program named "form-mail.pl" in the "cgi-bin" directory (folder) running in the domain's root web directory on a web server with the fictional address http://www.anywhere.com.
6. The CGI program "handles" or processes the form input information. In this case, it processes and passes the information collected by the form to you in an email message.

To begin this tutorial

1. Create a new folder named "forms_practice."
2. Inside the forms_practice folder create an "images" folder.
3. Download this image and save it to the "images" folder inside the forms_practice folder.
4. Open a blank HTML file with the default set of HTML document tags and save it to your forms_practice folder. Name it "form1.html."
5. Enter the opening and closing form tags between the body tags.
6. Create four spaces between the two form tags.
7. Please follow the instructions between the two form tags below.

<FORM ACTION="http://www.anywhere.com/cgi-bin/form-mail.pl" METHOD="POST">

1. For each kind of form element listed below, enter the code as shown for each example between the two form tags.
2. Separate each new form element, text box, check box etc. with a <P> paragraph tag.
3. After adding a new form element, save your work and view the file with a web browser.

1. The TEXT BOX tag
Address

Address <INPUT TYPE="TEXT" NAME="address" SIZE="60">

1. The word Address shown above to the left of the text field is the visible text the visitor will see on their page.
2. The TYPE="TEXT" code defines the kind of input field, in this case a text box.
3. The NAME="address" code makes the word "address" the identifier text that is returned in front of the information the visitor entered in that text box. It helps you the recipient know which field the information came from.
4. In your email you would see "address: 1426B Oak Street" if your visitor had entered the address 1426B Oak Street in the text box.
5. SIZE="60" indicates the length of the TEXT box in characters.
6. You can adjust the SIZE attribute to shorten or lengthen the TEXT box.

Netscape

Internet Explorer

Opera

<INPUT TYPE="CHECKBOX" NAME="browser" VALUE="Netscape" > Netscape
<INPUT TYPE="CHECKBOX" NAME="browser" VALUE="Internet Explorer"> Internet Explorer
<INPUT TYPE="CHECKBOX" NAME="browser" VALUE="opera" checked> Opera

1. The TYPE="CHECKBOX" code defines the kind of input field, in this case a CHECKBOX.
2. The NAME="browser" code makes the word "browser" the identifier text that is returned to you in email to the right of the information the visitor entered in the CHECKBOX. It helps you the recipient know which field the information came from.
3. If the visitor checked the "Netscape," check box the word that follows the VALUE=" " attribute, in this case "Netscape" would be sent to you in email by the cgi.
4. In your email you would typically see "Browser: Netscape"
5. The word Netscape at the end of the line of code is the word the user will see on the HTML page, it is just regular, formatted html text..
6. Visitors can check multiple check boxes in a group making more than one selection.
7. Note the last line where the attribute "checked" follows "opera." This pre-checks, or preselects the check box. This is often used as a marketing ploy in the hope you will overlook the pre-checked box and submit it by default.

yes

no

maybe

<INPUT TYPE="RADIO" NAME="answer" VALUE="yes"> yes
<INPUT TYPE="RADIO" NAME="answer" VALUE="no"> no
<INPUT TYPE="RADIO" NAME="answer" VALUE="maybe" checked> maybe

1. The TYPE="RADIO" code defines the kind of input field, in this case a RADIO BUTTON. TYPE="RADIO" also controls the behavior of the set of radio buttons. It allows the user to check only one radio button in a given set of buttons.
2. The word "answer" that follows the NAME attribute is returned with the form information and precedes the information submitted. You do not have to use the word "answer." You can use any word you want. Be sure to use a single word, no spaces allowed.
3. VALUE="yes" is the information returned by the form as the users choice if they selected this button.
4. In your email you would see "answer: yes"
5. The words yes, no and maybe at the end of the lines of code are the visible words the user will see on the HTML page. Again, these are regular html text.
6. Note the last line where the optional attribute "checked" follows "maybe." This pre-checks or preselects the radio button. You do not have to preselect a button.

<OPTION VALUE="WIN" SELECTED>Windows 95/98/NT</OPTION>

<OPTION VALUE="MAC">Macintosh</OPTION>

<OPTION VALUE="LINUX">Linux/UNIX</OPTION>

<OPTION VALUE="BE">Be</OPTION>

<OPTION VALUE="AMIGA">Amiga</OPTION>

</SELECT>

Can you figure out how the code above works? Why does "Windows 95/98/NT" show up as the first item in the list?

Comments


Comments

<TEXTAREA NAME="comments" ROWS="10" COLS="50" WRAP="Physical"></TEXTAREA>

1. The TEXTAREA code defines the kind of input field, in this case a TEXTAREA.
2. The NAME="comments" makes the word "comments" the identifier text that is returned in front of the information the visitor entered in the TEXTAREA. It helps you the recipient know which field the information came from.
3. In your email you would see "comments: Thanks, great web site!" if your visitor had entered the comment "Thanks, great web site!" in the TEXTAREA.
4. ROWS="10" COLS="50" defines the dimensions of the TEXTAREA's width and height. You may adjust these numbers to get a box the size you want.
5. ROWS define vertical height
6. COLS define the width of the TEXTAREA.
7. WRAP="Physical" tells the TEXTAREA to wrap the text inside the box when it hits the right side.

1. INPUT TYPE="SUBMIT" and INPUT TYPE="RESET" define the kind of buttons these are, in this case the Submit and Clear Form buttons.
2. The VALUE="Submit" and VALUE="Clear Form" code define the text on the buttons. You may change this text if you wish. For example, you could change VALUE="Clear Form" to VALUE="Reset" and the viewer would see a button that said "Reset."

You can refer to any gif image and use it as your customized button for submitting form information. In the example below, we have used the button "buy.gif" as an example. The "buy.gif" image is located in the images folder in the forms_practice folder you created earlier in this tutorial.

This must always be the second to last form element, placed after all your form input elements like check boxes, text areas, radio buttons etc. and just before the closing form tag. </form>

The active image code that when clicked on will send the forms information to the server looks like the code below.

<input type="image" border="0" name="imageField" src="images/buy.gif" width="40" height="31">

8. The Closing Form Tag

</FORM>
This tag must end or close every HTML form. It is the last form element. If it is not present, the form will not work.