CSci 220 - Lecture 13

Web Page Design

© Morris Firebaugh

 


I. Chapter 12: Building and Using HTML FORMS

 


A. Syntax of FORMS

Conceptual Background: Pull vs. Push

A nice introduction to Forms is given in Adam Elman's Stanford Lecture

 

 

General Syntax of Forms

<FORM ACTION=....METHOD=....>
<INPUT NAME=....VALUE=....TYPE=....>
<INPUT NAME=....VALUE=....TYPE=....>
....
<INPUT NAME=....VALUE=....TYPE=....>
</FORM>


<FORM> Tag Syntax

<FORM>...</FORM> is a container tag with attributes

 


<INPUT> Tag Syntax

<INPUT> is a single tag defining a field or element of the form.  Attributes include:

 


<TEXTAREA> Tag Syntax

Container tag for a "free-form" scroll box for text.  Attributes include:



<SELECT> Tag Syntax

This tag allows users to select the form data from a pop-up menu

 


Text Entry Fields - Syntax

<FORM ACTION="/cgi-bin/print-result.pl" METHOD="POST">
<H3>The text box provides a way to enter up to one line of text.
-- Text box</H3>
<BR><INPUT TYPE="text" NAME="text-box" SIZE="30">
<H3>The Textarea tag can define a multiline area for the user to enter text.<BR>

These are the default contents -- they may be left blank.

</H3>
<BR><TEXTAREA NAME="text-area" ROWS=6 COLS=50>
These are the default contents -- they may be left blank.
</TEXTAREA>

</FORM>

 

Produces

 

The text box provides a way to enter up to one line of text. -- Text box

The Textarea tag can define a multiline area for the user to enter text. These are the default contents -- they may be left blank.

 


Choice Buttons - Syntax

<FORM ACTION="/cgi-bin/print-result.pl" METHOD="POST">
<H3>Checkboxes can be on or off; arranged in a group, they can allow multiple selections from a set of choices.<BR>
-- Checkbox
</H3>
<BR><INPUT TYPE="checkbox" NAME="this-box">

<H3>Radio buttons must be grouped, and within a group, only one can be checked at any given time.<BR>
-- Radio Button
<BR>
</H3>

<BR><INPUT TYPE="radio" NAME="radio-button" VALUE="on" CHECKED>On
<BR><INPUT TYPE="radio" NAME="radio-button" VALUE="off">Off

</FORM>

 

Produces

 

Checkboxes can be on or off; arranged in a group, they can allow multiple selections from a set of choices.
-- Checkbox

Radio buttons must be grouped, and within a group, only one can be checked at any given time.

-- Radio Button

On

Off

 


B. A Seminal Example of Forms

Extend the Syntax of Forms

<FORM ACTION="http://myserver.cobweb.com/doform">
...fields go here...
...mixed with any body-content text and tables you like...
<P><INPUT TYPE=submit><INPUT TYPE = reset>
</FORM>


Example 1: Basic Text Entry Field Forms

 

This form adds you to our mailing list.

Name:

Street Address:

City:

State:

Zip:

 

HTML Code producing Example 1:

<BLOCKQUOTE>
<P><FORM ACTION="mailto:firebaug@uwp.edu" METHOD="post"></P>
<H3>This form adds you to our mailing list.</H3>

<P>Name:<INPUT TYPE="text" NAME="surname" SIZE="20"></P>
<P>Street Address:<INPUT TYPE="text" NAME="street" SIZE="20"></P>
<P>City:<INPUT TYPE="text" NAME="city" SIZE="20"></P> 
<P>State:<INPUT TYPE="text" NAME="state" SIZE="2"></P>
<P>Zip:<INPUT TYPE="text" NAME="zip" SIZE="5"></P>
<P><INPUT TYPE=submit><INPUT TYPE=reset>
</FORM>
</BLOCKQUOTE>



C. Example 2: A Better Form for Forms - Tables

 

This form adds you to our mailing list.

Name:
Street Address:
City:
State:
Zip:



D. Example 3: Using Radio Buttons

This is the ideal format for on-line exams and quizzes



4. The first four principles of Web Page Design presented in the course included all of these except

the Web is the best source of information
borrow ideas - copy proven designs
use extensive graphics
stick with OOP
use hierarchical data structures (folders)

 



35. In the first third of the course, our CS-220 lectures

contained only PULL
contained only PUSH
contained both PULL and PUSH
contained neither PULL nor PUSH
can't say from the information given

 






Question 4 was produced by the HTML code:

<H4>4.  The first four principles of Web Page Design presented in the course included all of these except</H4>
<BLOCKQUOTE>
<INPUT TYPE="radio" NAME="Answ4" VALUE="1" > the Web is the best source of information<BR>
<INPUT TYPE="radio" NAME="Answ4" VALUE="2"> borrow ideas - copy proven designs<BR>
<INPUT TYPE="radio" NAME="Answ4" VALUE="3"> use extensive graphics<BR>          
<INPUT TYPE="radio" NAME="Answ4" VALUE="4"> stick with OOP<BR>
<INPUT TYPE="radio" NAME="Answ4" VALUE="5"> use hierarchical data structures (folders)
</BLOCKQUOTE>

Note Radio Button features:

  1. Each set allows only one (exclusive) answer
  2. Different sets are distinguished by the logical NAME (Answ4, Answ35, etc.)

 


E. Example 4: Check Boxes for Independent Correct Answers

Consider the following order for an ice-cream desert:


Please check each box to customize your ice-cream delight:

1-Dip

2-Dips

3-Dips

Bananas

Cheries

Chocolate

Butterscotch

Marshmello


The syntax for generating checkboxes is:

<P><INPUT TYPE="checkbox" NAME="topping" VALUE="3-Dip"> 3-Dips</P>



F. One Final Example -->  <SELECT> + <OPTION>

Suppose, in building a Student Registration system, we want to restrict responses on student status to: 

FRESHMAN...OCCASIONAL/RETIRED.

<FORM ACTION="mailto:firebaug@uwp.edu" METHOD="post">
<H4>Select your current UW-Parkside student STATUS:</H4>
<SELECT NAME="status" MULTIPLE SIZE=3>
	<OPTION>Freshman</OPTION>
	<OPTION>Sophmore</OPTION>
	<OPTION>Junior</OPTION>
	<OPTION>Senior</OPTION>
	<OPTION>Graduate Student</OPTION>
	<OPTION>Occasional/Retired</OPTION>
</SELECT>
<P><INPUT TYPE=submit><INPUT TYPE=reset>
</FORM>


Produces

Select your current UW-Parkside student STATUS:



 


G. Laboratory Exercise # 7

 




Updated February 27, 2001