Building Web Sites - Javascript

9. Forms

This page describes:

different types of forms
form elements
how forms are used in conjunction with scripts

Types of Forms

If you've spent much time on the web, you have seen and used HTML forms.

Some common uses of HTML forms include:

guestbooks
order forms
surveys
tests

Almost all forms gather information. Some forms use the browser's email to send information to one or more recipients, while other forms use a webserver's email to send information. For anything more complicated than sending a simple email from a browser, most webmasters use CGI (common gateway interface) scripts to process the input.

Form Tag

The form tag has two key attributes: Method and Action.

Method = either POST or GET - POST is most popular and compatible

Action = the name of the script used to process the data from the form - it needs to include the path (URL) of the script

Start with:
<FORM METHOD="POST" ACTION="mailto:your email address">
or
<FORM ACTION=http://spider.cinstate.cc.oh.us/~inst/cgi-bin/comments.exe METHOD=POST ENCTYPE="application/x-www-form-urlencoded">

...form data...

</form>

Some Examples of Form Elements

Use this form to send us comments and bug reports on our lessons. Also, we're always looking for qualified beta testers for our [fictitious] products. If you are interested in beta testing, please be sure to leave your e-mail address, and we'll contact you for more information.

Here's a text field:

What do you think about this product?

Here's a drop down list:

Enter the product you are commenting on:

Enter the product you are commenting on:
<SELECT NAME="prodname">
<OPTION selected=selected value="">Pick an option from this drop-down list:</OPTION>
     <OPTION>Ray's Java Jive</OPTION>
     <OPTION>Ray's Java Jive Gold</OPTION>
     <OPTION>Ed's Interactive Forms</OPTION>
     <OPTION>Ed's Image Map Coordinate Checker</OPTION>
     <OPTION>Ray & Ed's Excellent Website Course</OPTION>
     <OPTION>Pam's Personal Packet Protocol Prompter</OPTION>
</SELECT>

Here's another drop-down list (how is this different from the one above?):

Select one of more comment categories:

Select one of more comment categories:
<SELECT NAME="type" SIZE="2" MULTIPLE>
     <OPTION VALUE="1">General Comment</OPTION>
     <OPTION VALUE="2">Bug Report</OPTION>
     <OPTION VALUE="3">New Feature Request</OPTION>
     <OPTION VALUE="4">Follow-up Comment</OPTION>
</SELECT>

Here's a set of check boxes:

How did you hear about this product?

Magazine: Internet Browsing: Recommendation from a friend: Other:

Magazine:
         <INPUT TYPE="CHECKBOX" NAME="magazine" VALUE="mag">
Internet Browsing:
         <INPUT TYPE="CHECKBOX" NAME="Internet" VALUE="int">
Recommendation from a friend
         <INPUT TYPE="CHECKBOX" NAME="recommendation" VALUE="rec">
Other:
         <INPUT TYPE="CHECKBOX" NAME="other" VALUE="oth">

Here's a group of radio buttons:

How satisfied are you with this product?
Very Satisfied Somewhat Satisfied Not Satisfied Not at All Satisfied

Here's a group of radio buttons:

How satisfied are you with this product?
Very Satisfied
       <INPUT TYPE="RADIO" NAME="howsat" VALUE="vs">
Somewhat Satisfied
       <INPUT TYPE="RADIO" NAME="howsat" VALUE="ss">
Not Satisfied
       <INPUT TYPE="RADIO" NAME="howsat" VALUE="ns">
Not at All Satisfied
       <INPUT TYPE="RADIO" NAME="howsat" VALUE="na">

Here's a text area:

Enter comments or bug report here:

If you want a return call, please enter your product serial number and your phone number:

Here's a text area:

Enter comments or bug report here:
<TEXTAREA NAME="textcomment" ROWS="3" COLS="40">
</TEXTAREA>

Oh, look: here's a password field:

Serial Number:

Oh, look: here's a password field: Serial Number:
<INPUT TYPE="PASSWORD" SIZE="20" MAXLENGTH="16">

Notice how a password field functions differently from this phone number field:

Phone Number:

Phone Number:

<INPUT SIZE="20">

Guess what, there's a hidden field here:

Pick Here for Lesson 10 - Javascript