S.B.C.C. -> Computer Science -> Courses -> COMSC 111 -> Class Notes

Form Definintion

Forms start out with a form definition consisting of the form tag and its associated options.

<FORM ACTION="URL" METHOD=GET|POST>

Form stuff goes in here

</FORM>

The stuff that goes in between the FORM tags can be contained within other HTML tags. This allows you to have a lot of fun formatting your user interface elements.

The ACTION URL is the CGI program which will handle the output of the form. Forms are meant to feed into CGI programs, do JavaScript, or both. The METHOD option is the way the form submits its information to the server. Typically, the POST method is used. The alternative is the GET method.

POST sends the data back using the http protocol itself. The GET method places the name value pairs onto the URL specified in the action part of the FORM tag. The main difference between the two is that the GET method has a limited amount of information it can return from a form.

The Most Important Aspect of Forms

The most important aspect of forms is that they return name/value pairs.

User Interface Elements

This covers the different user interface elements (buttons, text fields, radio buttons, etc.) that you can have in a form and what they look like. All user interface elements consist of three basic fields: type, name, and value.

The tag for an interface element is an INPUT tag. This tag must be contained in a form tag and should include a name/value pair. The different types of tags specify the different user interface elements.

Tag Examples

Note that all of these definitions must be enclosed in a form tag pair.

HTML Form Element
<input type="button" name="press me" value="Press Me">
<input type="submit" name="submit form" value="submit">
<input type="checkbox" name="drink" value="milk">Milk
<input type="checkbox" name="drink" value="soda" checked>Soda		 Milk
Soda
<input type="radio" name="drink" value="milk">Milk
<input type="radio" name="drink" value="soda">Soda		 Milk
Soda
<input type="text" name="numbers" value="123456789012" size=10 maxlength=5>
<select name="parts"><option>RAM<option>ROM<option>Keyboard</select></form>
<select name="parts" multiple size=2><option>RAM<option selected>ROM<option>Keyboard</select></form>
<textarea name="message" rows=2 cols=10>Default Text</textarea>

Tag Summary

This tag summary is ripped off of Kevin Werbach's Barebones Guide to HTML. I've deleted Netscape 2.0 extensions.

  Define Form <FORM ACTION="URL" METHOD=GET|POST></FORM>  
  Input Field <INPUT TYPE="TEXT|PASSWORD|CHECKBOX|RADIO| BUTTON|HIDDEN|SUBMIT|RESET">  
  Field Name <INPUT NAME="***">  
  Field Value <INPUT VALUE="***">  
  Checked? <INPUT CHECKED> (checkboxes and radio boxes)
  Field Size <INPUT SIZE=?> (in characters)
  Max Length <INPUT MAXLENGTH=?> (in characters)
  Selection List <SELECT></SELECT>  
  Name of List <SELECT NAME="***"></SELECT>  
  # of Options <SELECT SIZE=?></SELECT>  
  Multiple Choice <SELECT MULTIPLE> (can select more than one)
  Option <OPTION> (items that can be selected)
  Default Option <OPTION SELECTED>  
  Input Box Size <TEXTAREA ROWS=? COLS=?></TEXTAREA>  
  Name of Box <TEXTAREA NAME="***"></TEXTAREA>  

Sample Form

The form below will show you the name/value pairs input when you press the submit button. You can use the same action URL to test your forms.

Name:
Pick One: High Low

Last Updated: February 19, 1998
Author: Dean Nevins <dn@picard.sbcc.cc.ca.us>