Forms

or scroll down the page.

Return to Main Page of Ted’s HTML Tutorial

A web site can be enhanced by one or more forms used to collect responses from people visiting the site.  The six types of form elements described on this page are basic but are adequate to request most types of information from visitors.

With some internet servers, the information which is gathered by forms and sent to your email address will run together, and portions of it may appear nonsensical.  If so, a “CGI” (Common Gateway Interface) program may be required.  Just one site which describes more about this is http://hoohoo.ncsa.uiuc.edu/cgi.

To create a form, “form” tags are used in the source code document:

To be able to post the information (that is, for the visitor to be able to supply you with the information via email), the <FORM> tag must contain within it other parameters as part of the command: Finally, two additional things need to be provided: 1) a button to submit the information and 2) a button to delete all the information entered, in case the person entering it makes errors and wishes to begin again or decides not to submit the form at all.  To do this, “submit” and “reset” buttons are used and will be described later.


For most form types or elements, an “input” tag is used:

The <INPUT> tag must contain within it other parameters as part of the command to further define it.  These parameters follow.


Brief information, such as a person’s name, address, or email address, can be elicited using a simple “text box.”  The parameters to be included within the <INPUT> tag are:

The following information in the source code: <FORM><FONT SIZE="4">You may include your web site address here:</FONT><BR>
<INPUT TYPE="TEXT" NAME="Web Address" SIZE="40" VALUE="http://">
</FORM>
would create this text box on a browser:
You may include your web site address here:
and the response would be received as: Web+Address=http://(text of web address).


The following information in the source code:
<FORM><FONT SIZE="4">Please type in your zip code here (include all 9 digits, if you know them):<BR>
<INPUT TYPE="TEXT" Name="Zip Code 1" SIZE="5" MAXLENGTH="5">- <INPUT TYPE="TEXT" Name="Zip Code 2" SIZE="4" MAXLENGTH="4"></FONT>
</FORM>
would create these text boxes on a browser:
Please type in your zip code here (include all 9 digits, if you know them):
-
and a possible response might be: Zip+Code+1=12345&Zip+Code+2=6789.


If a user’s password is required to obtain certain information or to enter a certain area, the solution is a “password box.”  The parameters to be included within the <INPUT> tag are:

The following information in the source code:
<FORM><FONT SIZE="4">Please type in your password here:</FONT><BR>
<INPUT TYPE="PASSWORD" NAME="Password" SIZE="5" MAXLENGTH="5">
</FORM>
would create this text box on a browser:
Please type in your password here:
and the response, if the password “catch” were to be typed in, would be received as: Password=catch.


When a choice of one item among a group of two or more items is to be made, a collection of “radio buttons” may be used.  The parameters to be included within the <INPUT> tag are:

The following information in the source code: <FORM><FONT SIZE="4">How many cylinders are in the car you drive most?<BR>
<INPUT TYPE="RADIO" NAME="Car cylinders" VALUE="4" CHECKED>4<BR>
<INPUT TYPE="RADIO" NAME="Car cylinders" VALUE="6">6<BR>
<INPUT TYPE="RADIO" NAME="Car cylinders" VALUE="8">8<BR>
<INPUT TYPE="RADIO" NAME="Car cylinders" VALUE="Don't know">don't know<BR>
<INPUT TYPE="RADIO" NAME="Car cylinders" VALUE="Don't drive car">don't drive a car</FONT>
</FORM>
Note:  If more than one group of radio buttons is contained on a page, form tags must be placed before and after each group of buttons.  Otherwise, only one button on the entire page will be able to be checked.  Furthermore, since forms cannot be nested inside of other forms, one form must be ended on a page before another one can begin: <FORM>form 1</FORM>, <FORM>form 2</FORM>, <FORM>form 3</FORM>.
would create this group of radio buttons on a browser:
How many cylinders are in the car you drive most?
4
6
8
don't know
don't drive a car
and the response might be received as: Car+cylinders=6


When a choice of one or more items among a group of two or more items is to be made, a collection of “checkboxes” may be used.  The parameters to be included within the <INPUT> tag are:

The following information in the source code: <FORM><FONT SIZE="4">Which of these toppings do you like to have on your pizza?<BR>
<INPUT TYPE="CHECKBOX" NAME="Pizza" VALUE="anchovies">anchovies<BR>
<INPUT TYPE="CHECKBOX" NAME="Pizza" VALUE="bell peppers">bell peppers<BR>
<INPUT TYPE="CHECKBOX" NAME="Pizza" VALUE="cheese" CHECKED>cheese<BR>
<INPUT TYPE="CHECKBOX" NAME="Pizza" VALUE="ham">ham<BR>
<INPUT TYPE="CHECKBOX" NAME="Pizza" VALUE="jalapeño peppers">jalapeño peppers<BR>
<INPUT TYPE="CHECKBOX" NAME="Pizza" VALUE="mushrooms">mushrooms<BR>
<INPUT TYPE="CHECKBOX" NAME="Pizza" VALUE="onions">onions<BR>
<INPUT TYPE="CHECKBOX" NAME="Pizza" VALUE="pepperoni">pepperoni<BR>
<INPUT TYPE="CHECKBOX" NAME="Pizza" VALUE="pineapple">pineapple<BR>
<INPUT TYPE="CHECKBOX" NAME="Pizza" VALUE="sausage">sausage</FONT>
</FORM>
would create this group of checkboxes on a browser:
Which of these toppings do you like to have on your pizza?
anchovies
bell peppers
cheese
ham
jalapeño peppers
mushrooms
onions
pepperoni
pineapple
sausage
and the response might be received as: Pizza=cheese&Pizza=jalapeño+peppers&Pizza=onions&Pizza=pepperoni


Another way to select one or more choices on a list is with a “pop-up box.”  To create this form element, the “select,” “option selected,” and “option” tags must be used:

The <SELECT> tag contains within it other parameters as part of the command: The following information in the source code: <FORM><FONT SIZE="4">In what type of dwelling do you reside?<BR>
<SELECT NAME="Residence" SIZE="1">
<OPTION SELECTED>apartment
<OPTION>condominium
<OPTION>attached house
<OPTION>detached house
<OPTION>other
</SELECT></FONT>
</FORM>
would create this pop-up box on a browser:
In what type of dwelling do you reside?
and the response might be received as: Residence=condominium


These two form source codes (differing only in the SIZE parameters):

1. <FORM><FONT SIZE="4">Which of these options do you feel are essential for a computer to have?  (To highlight your choices, keep the Control (Ctrl) button on your keyboard pressed down as you click on each item which you wish to select or unselect.)<BR>
<SELECT NAME="Computer" MULTIPLE SIZE="4">
<OPTION SELECTED>250 MHz or faster processor
<OPTION>4.0 GB or larger hard drive
<OPTION SELECTED>floppy disc drive
<OPTION>10X or faster CD ROM drive
<OPTION>active matrix screen
<OPTION SELECTED>internal fax modem
<OPTION>16-bit or greater digital sound
</SELECT></FONT></FORM>


2. <FORM><FONT SIZE="4">Which of these options do you feel are essential for a computer to have?  (To highlight your choices, keep the Control (Ctrl) button on your keyboard pressed down as you click on each item which you wish to select or unselect.)<BR>
<SELECT NAME="Computer" MULTIPLE SIZE="7">
<OPTION SELECTED>250 MHz or faster processor
<OPTION>4.0 GB or larger hard drive
<OPTION SELECTED>floppy disc drive
<OPTION>10X or faster CD ROM drive
<OPTION>active matrix screen
<OPTION SELECTED>internal fax modem
<OPTION>16-bit or greater digital sound
</SELECT></FONT></FORM>
would produce two similar pop-up boxes (one with 4 of the items showing, one with all of the items showing) on a browser:
Which of these options do you feel are essential for a computer to have?  (To highlight your choices, keep the Control (Ctrl) button on your keyboard pressed down as you click on each item you wish to select or unselect.)
Which of these options do you feel are essential for a computer to have?  (To highlight your choices, keep the Control (Ctrl) button on your keyboard pressed down as you click on each item you wish to select or unselect.)
Note:  As stated before, on some browsers, all of the items will be displayed in a pop-up box when the MULTIPLE parameter is included, no matter what the value of the SIZE parameter is.
and the response might be received as: Computer=100+MHz+or+faster+processor&Computer=1.0+GB+or+larger+hard+drive&
Computer=floppy+disc+drive


A good way way to solicit comments, suggestions, or other lengthy information is with a “text area box”:

The <TEXTAREA> tag should contain within it other parameters as part of the command:
The following information in the source code: <FORM><FONT SIZE="4">Do you have any questions, comments or suggestions?<BR>
Please include them here:<BR>
<TEXTAREA NAME="Comments" ROWS="6" COLS="50">Hi, Ted: </TEXTAREA></FONT></FORM>
would create this text area box on a browser:
Do you have any questions, comments or suggestions?
Please include them here:
and the response would be received as: Comments=Hi,+Ted:+(text of comments).


Once a form or form element is in place, two buttons need to be created, both employing parameters within the <INPUT> tag: 1) a button to “submit” the form: and 2) a button to “reset” the entire form (in case the person responding should choose to do so):
These two different sets of information in the source code: 1. <FORM>&nbsp; &nbsp; &nbsp;<INPUT TYPE="SUBMIT" VALUE="Send Form">&nbsp; &nbsp; &nbsp;<INPUT TYPE="RESET" VALUE="Clear Form">
</FORM>


2. <FORM>
<TABLE CELLSPACING="30">
<TR>
<TD><INPUT TYPE="SUBMIT" VALUE="Send Form"></TD>
<TD><INPUT TYPE="RESET" VALUE="Clear Form"></TD>
</TR>
</TABLE>
</FORM>
would create similar pairs of buttons on a browser:
               
Note:  Do not forget to begin every form with a <FORM> tag and end it with a </FORM> tag!

The following form:

<FONT FACE="ARIAL" SIZE="4">
<H2 ALIGN="CENTER"><FONT COLOR="RED">A</FONT><FONT COLOR="GREEN">B</FONT><FONT COLOR="BLUE">C</FONT> <FONT COLOR="PURPLE">Electronics</FONT></H2>
<H3 ALIGN="CENTER">Survey Form</H3>
<P>If you are interested in purchasing one or more of our products, before ordering please complete some or all of the following survey for our marketing department.&nbsp; Answering any question is optional, and all information will be kept strictly confidential.&nbsp; Thank you very much for your time!</P>

<FORM METHOD="POST" ACTION="mailto:ABC123@aol.com">
<OL>
<LI><P>What is your name?<BR>
<INPUT TYPE="TEXT" NAME="Name" SIZE="40"></P>

<LI><P>What is your date of birth?<BR>
<TABLE CELLSPACING="5">
<TR> <TD>
Month: <SELECT NAME="Month">
<OPTION SELECTED>January<OPTION>February<OPTION>March<OPTION>April
<OPTION>May<OPTION>June<OPTION>July<OPTION>August
<OPTION>September<OPTION>October<OPTION>November<OPTION>December
</SELECT>
</TD>
<TD>
Date: <SELECT NAME="Date">
<OPTION SELECTED>1<OPTION>2<OPTION>3<OPTION>4<OPTION>5<OPTION>6
<OPTION>7<OPTION>8<OPTION>9<OPTION>10<OPTION>11<OPTION>12
<OPTION>13<OPTION>14<OPTION>15<OPTION>16<OPTION>17<OPTION>18
<OPTION>19<OPTION>20<OPTION>21<OPTION>22<OPTION>23<OPTION>24
<OPTION>25<OPTION>26<OPTION>27<OPTION>28<OPTION>29<OPTION>30
<OPTION>31
</SELECT>
</TD>
<TD>
Year: <INPUT TYPE="TEXT" NAME="Year" SIZE="4" VALUE="19">
</TD>
</TR>
</TABLE></P>

<LI><P>What is your mailing address (if you would like to have a hard copy of our catalog sent to you)?<BR>
<TEXTAREA NAME="Address" ROWS="4" COLS="50">Number/P.O. Box/Route:
Street/Avenue/Road:
City:
State/Zip: </TEXTAREA></P>

<LI><P>What is your email address?<BR>
<INPUT TYPE="TEXT" NAME="Email" SIZE="30"></P>

<LI><P>Have you viewed our online product catalog?<BR>
<INPUT TYPE="RADIO" NAME="Online catalog" VALUE="Yes" CHECKED>Yes
<INPUT TYPE="RADIO" NAME="Online catalog" VALUE="No">No</P>

<LI><P>If so, what product(s), besides the one you are ordering, might you be interested in purchasing in the future?  (Check all that apply.)<BR>
<INPUT TYPE="CHECKBOX" NAME="Product interest" VALUE="VCR">VCR<BR>
<INPUT TYPE="CHECKBOX" NAME="Product interest" VALUE="Big Screen TV">Big Screen TV<BR>
<INPUT TYPE="CHECKBOX" NAME="Product interest" VALUE="Audio equipment">Audio Equipment<BR>
<INPUT TYPE="CHECKBOX" NAME="Product interest" VALUE="Video equipment">Video Equipment<BR>
<INPUT TYPE="CHECKBOX" NAME="Product interest" VALUE="Camera equipment">Camera Equipment<BR>
<INPUT TYPE="CHECKBOX" NAME="Product interest" VALUE="Other" CHECKED>Other <INPUT TYPE="TEXT" NAME="Other" SIZE="40" VALUE="Please List: "></P>

<LI><P>Do you have any questions, comments or suggestions before proceeding to the Order Form?<BR>
<TEXTAREA NAME="Comments" ROWS="6" COLS="50">Your Input: </TEXTAREA>
<CENTER>
<TABLE CELLSPACING="30">
<TR> <TD><INPUT TYPE="SUBMIT" VALUE="Send Form"></TD>
<TD><INPUT TYPE="RESET" VALUE="Clear Form"></TD>
</TR>
</TABLE>
</CENTER></P>
</OL>
</FORM><BR>

Again, thank you...we appreciate the information.&nbsp; Please proceed now to the <A HREF="orderfrm.html">Order Form</A>.</FONT>

would be marked up with this appearance on a browser:

ABC Electronics

Survey Form

If you are interested in purchasing one or more of our products, before ordering please complete some or all of the following survey for our marketing department.  Answering any question is optional, and all information will be kept strictly confidential.  Thank you very much for your time!

  1. What is your name?

  2. What is your date of birth?
    Month: Date: Year:

  3. What is your mailing address (if you would like to have a hard copy of our catalog sent to you)?

  4. What is your email address?

  5. Have you viewed our online product catalog?
    Yes No

  6. If so, what product(s), besides the one you are ordering, might you be interested in purchasing in the future?  (Check all that apply.)
    VCR
    Big Screen TV
    Audio Equipment
    Video Equipment
    Camera Equipment
    Other

  7. Do you have any questions, comments or suggestions before proceeding to the Order Form?

Again, thank you...we appreciate the information.  Please proceed now to the Order Form.
Note:  The “Send Form” button above, if activated, will send the form data to a nonexistent location.  Also, the “Order Form” hyperlink is not active; it is for demonstration only.

Proceed to Frames

Return to Main Page of Ted’s HTML Tutorial

Copyright © 1998– by Ted M. Montgomery.  All rights reserved.