Client-Side Scripting with JavaScript

Part 7 - HTML Forms

Form Tags

The <FORM> </FORM> tags enclose all other form elements:

<FORM ACTION="getname.cgi" METHOD="POST" NAME="nameform"> </FORM> In regular HTML documents, the ACTION parameter is required. CGI programming (server-side) uses this to get the file or program which will process the form. In JavaScript, this can be blank and the action can be controlled by JavaScript commands.

The NAME parameter is not generally used in regular CGI programming, but in JavaScript it is needed to refer to form elements.

Input Fields

<INPUT> is the basic input field:

<INPUT TYPE="TEXT" NAME="state" VALUE="PA" SIZE=2> The HTML for this is:

<FORM METHOD=POST ACTION="demo1.cgi"> First Name: <INPUT SIZE=25 NAME="fname"><BR> Last Name: <INPUT SIZE=35 NAME="lname"><P> Comments or questions: <BR> <TEXTAREA NAME="comments" ROWS=4 COLS=50> </TEXTAREA> </FORM>

Radio Buttons

Radio buttons let you select one item:
Tags for these buttons:

Preferred salutation: <INPUT TYPE="radio" NAME="salute" VALUE="Dr."> Dr. <INPUT TYPE="radio" NAME="salute" VALUE="Mr."> Mr. <INPUT TYPE="radio" NAME="salute" VALUE="Ms."> Ms. <P>

The Select Tag

Can create pull-down boxes to make selections:

Tags for this:

Where are you from?<BR> <SELECT NAME="school"> <OPTION>Millersville <OPTION>Shippensburg <OPTION>West Chester <OPTION>Other </SELECT><P>

Select can also be used for multiple choices (using the Ctrl or Shift keys):

Tags for this:

<SELECT NAME="activities" MULTIPLE SIZE=5> <OPTION VALUE="ROTC">Army ROTC <OPTION VALUE="BAND">Band <OPTION VALUE="CHOR">Choral Group <OPTION VALUE="OFCR">Class Officer <OPTION VALUE="PRES">Class President </SELECT>

Checkbox Input

Can be used for multiple selections:

What animals would you like to see pictures of?: Cat
Dog
Snake
Duck

The tags for these fields:

What animals would you like to see pictures of?<BR> <INPUT TYPE="CHECKBOX" NAME="pics" VALUE="cat.gif"> Cat<BR> <INPUT TYPE="CHECKBOX" NAME="pics" VALUE="dog.gif"> Dog<BR> <INPUT TYPE="CHECKBOX" NAME="pics" VALUE="snake.gif"> Snake<BR> <INPUT TYPE="CHECKBOX" NAME="pics" VALUE="duck.gif"> Duck<P>

Buttons

Buttons signal an action to take to process the form:

These use the input tag:

<INPUT TYPE=SUBMIT VALUE="Submit Form"> <INPUT TYPE=RESET VALUE="Reset"><P> Select term to schedule:<P> <INPUT TYPE=SUBMIT NAME=ACTION VALUE="Term 3"> <INPUT TYPE=SUBMIT NAME=ACTION VALUE="Term 4"> <INPUT TYPE=SUBMIT NAME=ACTION VALUE="Term 5">