The Internet: Co-Evolution of Technology and Society
CPSC 156a, Fall 2003

HW1: The Client-side of HTML forms


1a.  Logistics


1b.  Introduction


As you have seen in class, HTML forms are used to capture input data and present results to the user. The goal of HW1 is for you to design, create, and test a web form. It is largely up to you to decide what type of form to create, i.e., what users would use this form to accomplish, but there are some requirements (described in Section 1c below).

Forms generally link to an executable program (called a "script") that allows the user to enter data; these data are subsequently submitted to a web server. A server-side program then processes the data, and often the script prints the results of this processing on the client side in the browser. Typical real-world examples of web forms include form emailers, guest books, credit-card order pages, and surveys.

In this assignment, a script is provided that allows you both to experiment with the sample forms mentioned in Section 3 below and to test the form that you yourself create. After the user fills in the web form and presses the submit button, the data that have been entered are sent to the server. The script then emails the contents of the web form to the address(es) specified. You will be able to use these email messages for debugging purposes and must include one or more in your submitted homework in order to demonstrate that your form works correctly.


1c.  Requirements


Your submitted HTML file(s) will need to contain the following form items in order to function correctly.

     
            i.  <form action="http://zoo.cs.yale.edu/classes/cs156/2003/cgi-bin/sendform.cgi" method="post">

This required form item specifies two important things:  (1) Which script (i.e., "sendform.cgi") should be executed to process the contents of the form and (2) Which "method" (i.e., "post") should be used to send the contents of the web form to the server. ("Post" sends the user's input as a "data block." One can also use method="get," which appends the contents of the web form to the end of the URL.  Using method="post" is generally more reliable for larger web forms of 100 bytes or more.) 

HW1 Examples 1 and 2 illustrate this requirement.  See Section 3 below for details. 

             ii.   <input type="text" name="to" id="header:To" size="60" >

This required form item tells the script sendform.cgi to email the contents of the web form to the value of "text" entered in this particular form. (The value of size does not have to be exactly 60, but it does have to be large enough to accommodate an email entry).  

HW1 Examples 1 and 2 illustrate this requirement.  See Section 3 below for details. 

The form you submit should contain enough form items to illustrate fully what it is you are trying to design. For example, if you create a check-out form used to pay for items bought online (like Amazon's check-out page, with which you're probably familiar), your submission should contain enough form items to hold the user's last name, first name, middle initial, state, zip, phone number, home address, credit-card type, credit-card number, expiration date, quantity of item desired to order, and billing address. Thus, in this example of a "check-out form," you would need at least 12 form items to capture the necessary information about user.


Your complete HW1 submission should contain Please use a zip-compression utility such as winzip to combine all of these items into one compressed file before submission.  Please refer to the submit page for naming and assignment submission details.

You will be graded on how well you explain what your form is designed to accomplish, on whether or not the form that you submit fully accomplishes your goals, and on HTML style. The HTML tutorials mentioned in Section 2 below can provide guidance on HTML style. 


2.  Web-form basics

Here are some basics of HTML coding that you can use in constructing your form.

             i.  text fields type="text"

<form>
username: 
<input type="text" name="username">
</form>

                     How it looks in a browser: 

 username:
      
             ii.  text fields type="password"

<form>
password: 
<input type="password" name="password">
</form>

                     How it looks in a browser:

 password:


              iii.  textarea

<form>
<textarea rows="10" cols="30">
</textarea>
</form>

                     How it looks in a browser:


             iv.  radio buttons

<form>
<input type="radio" name="sex" value="male"> Male
<br>
<input type="radio" name="sex" value="female"> Female
</form>

 How it looks in a browser:     

Male
Female

             v.   check boxes

<form>
<input type="checkbox" name="SonicRio">
Sonic Rio S50
<br>
<input type="checkbox" name="iPod">
iPod
</form>
How it looks in a browser:  

Sonic Rio S50
iPod

             vi.  drop downs

<form>
<select name="juice">
<option value="currant">Currant
<option value="apple">Apple
<option value="orange">Orange
<option value="kiwi">Kiwi
</select>
</form>
How it looks in a browser: 

         

There are some very good HTML-form tutorials on the web.  Here are two that you may want to look at if you've never made a form before. 

   a) Webcom's Form tutorial:  http://www.webcom.com/html/tutor/forms/start.shtml
   b) W3School's HTML and Form tutorial:  http://www.w3schools.com/html/html_forms.asp

3.  Web-form examples

We have provided two form examples that satisfy the requirements given in 1.c. above. You may use them as a starting point in your work on this assignment. Recall that, if you see a webpage with an interesting feature, you can click on View -> Source in the menu bar to see the HTML for that page (and, in particular, for the feature of interest). 

Example 1:   Simple email form.

Example 2:   Moderately simple order and credit-card form.

Both examples are packaged according to the submission details found on the submit page.  Use winzip to extract the files. 

4.  HTML

Using your favorite text editor, you can write your own HTML code and then test it with any web browser. The code provided in the two examples will help you get started.

Alternatively, you can use a specialized HTML editor to create your webform .  One such editor is Netscape's "Composer."   Here are a few pointers to shareware HTML editors that you can try out.  Note that the HTML code generated by such an editor will often contain many formatting commands and thus will look much more complicated than the "bare bones" code we have provided in the examples.

 a) Home Site 5 http://downloads-zdnet.com.com/3000-2048-7718546.html?tag=lst-0-1
 b) HTML Kit 1.0 http://downloads-zdnet.com.com/3000-2048-4687625.html?tag=lst-0-1
 c) FormPAL 6.0 http://downloads-zdnet.com.com/3000-2048-10217519.html
 d) Cute HTML 2.3 http://downloads-zdnet.com.com/3000-2048-7495754.html?tag=lst-0-1
 e) Coffee HTML 9.5 http://downloads-zdnet.com.com/3000-2048-10191833.html?tag=lst-0-1
 f) Arachnophilia Full Ver. http://downloads-zdnet.com.com/3000-2048-3991816.html?tag=lst-0-1