Web Development 1

Forms

These notes help you:

understand different types of forms
recognize several different form elements
know how forms are used in conjunction with scripts

The notes are listed under these headings:

FORM tags
METHOD and ACTION attributes
INPUT tag
TYPE and NAME attributes
SELECT tag
CHECKBOX and RADIO
HIDDEN fields
RESET

Form Tag and attributes

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 version of this product are you using?

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:

to Syllabus