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:
<FORM>form</FORM>: creates a form which is used to request and gather information from a web site visitor. Forms cannot be nested inside of other forms.
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:
METHOD="POST": states that the method of dealing with the completed information in the form is to post it.
ACTION="mailto:your email address": indicates that the completed information is to be supplied or mailed to your email address. There can be no spaces in this command parameter.
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:
<INPUT>: indicates that a certain type of form element is to follow, such as a text box, radio button, checkbox, submit button, or reset button. This tag does not require an ending (</INPUT>) tag.
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:
TYPE="TEXT": creates a simple, one-row text box in which a single line of information may be typed and then emailed to the person requesting the information.
NAME="name": designates a name for the text box, such as "Name" or "Address" or "Email Address" or anything else.
Note: Email arriving from a text box with one of these names might read “Name=Bob+Smith” or “Address=123+Oak+Lane,+Omaha,+ NE+68164” or “Email+address=ABC123@aol.com” or whatever.
SIZE="S": defines the number of characters “S” that will appear in the text box. More text can be typed, but it all just will not appear at once in the text box.
Note: In most cases, SIZE="40" should provide more than adequate space for a text box.
MAXLENGTH="M": optional; specifies the maximum number of characters “M” which can be typed into the text box. When this maximum has been reached, no further characters will be allowed to be typed.
VALUE="text": optional; inserts fixed text into the text box.
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:
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:
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:
TYPE="PASSWORD": creates a simple, one-row password box in which a user’s password may be typed. Each typed character appears as an “x” to the person typing the password (so that no one else looking on can observe the characters the person is typing).
NAME="password": designates a name for the password box, which typically is “password.”
SIZE="S": defines the number of characters “S” that will appear in the password box. The box should be large enough to contain the largest possible password, so the user will be able to count the number of x’s displayed at once to make sure the proper number of letters has been typed in.
MAXLENGTH="M": optional; specifies the maximum number of characters “M” which can be typed into the password box. When this maximum has been reached, no further characters will be allowed to be typed.
VALUE="text": optional; inserts fixed text into the password box. However, every character of this text will appear to the user as an “x” and, therefore, is not recommended
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:
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:
TYPE="RADIO": creates a round radio button which, when selected, will negate the selection of any other radio button in that group. That is, the selection of one radio button in a group unselects any other radio button in that group, just as only one radio station can be selected on a real radio by pressing one button at a time. A group of radio buttons includes two or more buttons, and often there are several groups of radio buttons in a form.
NAME="heading of that set of buttons": designates a name for that group of radio buttons, such as "Like spinach" or "Favorite color" or whatever.
Note: All items in a radio button group must have the same name.
VALUE="name of button": assigns a value or name to a particular radio button, such as "Yes", "No"; or "red", "blue", "green", "yellow", "purple", "orange", "brown"; or whatever.
CHECKED: automatically checks (places a dot in) that item’s radio button, making it become the default selection. The responder can leave it as is or select another item, causing the pre-checked dot to disappear. If the CHECKED attribute is included in the <INPUT> tag for more than one item, only the last item containing it will be checked.
Note: Email arriving from a radio button group might read “Like+spinach=Yes” or “Favorite+color=blue” or whatever.
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:
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:
TYPE="CHECKBOX": creates a square checkbox which, when selected, will remain checked unless it is unselected. Any number, from one to all, of the checkboxes in a group may be checked. A group of checkboxes includes two or more boxes, and often there are several groups of checkboxes.
NAME="heading of that set of checkboxes": designates a name for that group of checkboxes, such as "Parent(s) living" or "Sports watch" or anything else.
Note: All items in a checkbox button group must have the same name.
VALUE="name of button": assigns a value or name to that particular checkbox, such as "father", "mother"; or "baseball", "basketball", "boxing", "football", "golf", "soccer", "tennis"; or whatever.
CHECKED: automatically checks (places a checkmark in) that item’s square. The responder can leave it as is or unselect it. From zero to all of the items in a checkbox list can be pre-checked.
Note: Email arriving from a checkbox button group might read “Parents+living=father&Parents+living=mother” or “Sports+watch=baseball&Sports+watch=basketball&Sports+watch=football” or whatever.
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:
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:
<SELECT><OPTION>tags</SELECT>: creates a pop-up box. In a pop-up box, where one <OPTION SELECTED> item is showing, the remainder of the <OPTION> items will “pop up” into view after clicking on the first item.
<OPTION SELECTED>: denotes which item will be shown initially in the pop-up box when only one selection is permitted, or which items within the box will be highlighted when multiple selections are permitted.
<OPTION>: denotes each item which will appear when the pop-up box is activated.
Note: A <BR> tag is not inserted at the end of an item beginning with an <OPTION SELECTED> or <OPTION> tag, as a line break automatically occurs at that point.
The <SELECT> tag contains within it other parameters as part of the command:
NAME="name": designates a name for the pop-up box, such as "Modem speed" or "Pets owned" or whatever.
MULTIPLE: indicates that more than one item in the box can be selected. Instructions to the user should be included as to how multiple items may be selected: “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.”
SIZE="S": indicates the number of items “S” within the pop-up box which will be visible initially. (There are exceptions. On some browsers, for a MULTIPLE selection box, the default is SIZE="4", even if less than 4 items are in the box. And on other browsers, when the MULTIPLE parameter is included, all of the items will be displayed, no matter what the value of the SIZE parameter is.) The size “S” can range from “1” (which is the default for a single selection box) to the total number of items in the box. When only one choice in the box is permitted (that is, when the MULTIPLE parameter is absent), the SIZE attribute typically also is “1.” When the size “S” is greater than “1,” but is less than the total number of items in the box, vertical scrolling arrows will appear on the right side of the box.
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:
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: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”:
<TEXTAREA>(optional text)</TEXTAREA>: creates a box in which information may be typed and then emailed to the person requesting the information. Optional text may be inserted between the <TEXTAREA> & </TEXTAREA> tags and will appear inside of the text area box. For pre-entered text within the text area box, extra spaces and end-of-line carriage returns are recognized (similar to using <PRE> & </PRE> tags); therefore, characters and <BR> tags are unnecessary.
The <TEXTAREA> tag should contain within it other parameters as part of the command:
NAME="name": assigns a name to the text area box, such as "Guestbook Comments" or "Suggestions" or anything else.
Note: Email arriving from a text area box with one of these names might read “Guestbook+Comments=Great+graphics!+I+even+grabbed+a+couple!+:-)” or “Suggestions=Maybe+use+a+lighter+background+so+the+print+will+contrast+better.”
ROWS="R": defines the number of rows (lines) “R” of text that are visible in the text box. (Usually, one row more than the number indicated is displayed.) Typing more than the allotted number of rows will activate a vertical scrolling bar and arrows at the right of the box so that more text can be included.
COLS="C": defines the number of characters “C” that can be typed in each row (line) of text before a new line is begun.
Note: In most cases, ROWS="6" and COLS="50" should provide more than adequate space for a text area box.
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:
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:
TYPE="SUBMIT": submits the form to the email address specified in the ACTION parameter.
VALUE="name of button": places a name (such as “Send Form” or “Relay Survey” or “Dispatch Document”) on the submit button. If this optional VALUE parameter is not included, the word “Submit” will appear on the button.
and 2) a button to “reset” the entire form (in case the person responding should choose to do so):
TYPE="RESET": resets the entire form, clearing all entries and enabling the responder to begin again, should he/she choose to do so.
VALUE="name of button": places a name (such as “Clear Form” or “Delete Items” or “Erase Entries”) on the reset button. If this optional VALUE parameter is not included, the word “Reset” will appear on the button.
Note: A reset button placed between <FORM> & </FORM> tags will reset only the form elements which are part of that form. It will not reset form elements in other forms which are in the same document. However, any reset button which is not situated between <FORM> & </FORM> tags will reset all form elements in the document.
These two different sets of information in the source code:
1. <FORM> <INPUT TYPE="SUBMIT" VALUE="Send Form"> <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. Answering any question is optional, and all information will be kept strictly confidential. 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 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>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. 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!
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.