Writing forms

Readings

Chapter 17.

On the Web

Generally speaking, before you can write up a form, you need to know the URL of the script it will be communicating with, and the variables and values that the script understands.

For this class, we'll play around with a general purpose cscript called "email" that will take any variables and values that you give it: Whatever you give it will be packaged up into an e-mail message that will be sent to the address coded in the variable recipient.

Starting a form

This page is actually a form. Before you start to gather variables you need the <form> tag.

<FORM METHOD="POST" ACTION="http://www.goshen.edu/cgi-bin/email">
  • METHOD may have the value:
    • GET, in which case the variables show up in the URL when the form is submitted.
    • POST, in which case the variables do not show up.
  • ACTION is the URL of the script to which the contents of the form will be 'handed off' when submitted.

Common Error: if you create form elements that are not enclosed between <FORM... > </FORM> tags, the form elements will not even display in Netscape.

Table tip: To get a form consisting of a single text input box (see below) in a row by itself with no line breaks before or afterwards, put the <FORM ...> and </FORM> tags outside the <TABLE>, rather than inside the <TD>..

Post and Get: Some scripts will only accept one METHOD or the other. For example, the email CGI program at GC insists on 'POST'. However, most php scripts do not care which you use. Any script that accepts the GET method has the useful property that you can construct a link to the script without going through a form.

 

Text input boxes

About you:
Your name:
Your e-mail address:

Send the form results to:
About you: <BR>
Your name: <INPUT TYPE=text ID="bname"><BR>
Your e-mail address: <INPUT TYPE=text ID="email" VALUE="@goshen.edu" size=30><br><br>
Send the form results to:
<INPUT TYPE="text" ID="recipient"
VALUE="@goshen.edu">

Two options for handicapped usability:

<label>Your name: <input type='text' id='bname'></label>

or if you don't want the label and input field right next to each other in your source code...

<label for='bname'>Your name:</label>
...
<input type='text' id='bname'>
Text options:
  • type= usually this is TEXT. if this is set to PASSWORD, input will show up as a bunch of ****'s
  • name= variable name
  • value= initial value for the variable
  • size= width of text input box in characters
  • maxlength= maximum number of characters to allow

Note also that "email" and "name" have special meanings when used with the email CGI program. See the documentation.

 

Hidden fields

[don't appear]

<INPUT TYPE="hidden" ID="subject"
VALUE="testing a mail-in form...">
<INPUT TYPE="hidden" ID="returnpage"
VALUE="http://www.goshen.edu/communication/326/forms.php">

 

Radio buttons

    Gender:
    female
    male

    Class:
    frosh
    sophomore
    junior
    senior

Gender:<br>
<INPUT TYPE=radio NAME="gender" VALUE="female"> female <br>
<INPUT TYPE=radio NAME="gender" VALUE="male"> male<br>


<BR>
Class: <br>
<INPUT TYPE=radio NAME="class" VALUE="fr"> frosh <br>
<INPUT TYPE=radio NAME="class" VALUE="so"> sophomore<br>
<INPUT TYPE=radio NAME="class" VALUE="jr" checked='checked'>junior<br>
<INPUT TYPE=radio NAME="class" VALUE="sr"> senior<br>

<fieldset>
<legend>Gender:</legend><br>
<label><input type='radio' name='gender' value='female'> female</label><br>
<label><input type='radio' name='gender' value='male'> male</label><br>
</fieldset>

Radio buttons should almost always be stacked vertically rather than horizontally

Radio button options:

  • name= variable name
  • value= value to be returned if this button is the one checked
  • checked='checked' sets a button initially to the "pressed" state

Drop-down menus

Area of the country you would most like to live in:
Area of the country you would most like to live in: <BR>
<SELECT NAME=dreamhome>
<OPTION>Midwest
<OPTION>Northeast
<OPTION>South
<OPTION>Southwest
<OPTION VALUE='nw'>Northwest
<OPTION>Alaska
<OPTION>Hawaii
</SELECT>

<option label='Northwest' value='nw'>Northwest</option>

Checkboxes

Extracurricular interests:
    choir/orchestra
    sports
    yearbook/newspaper
Extracurricular interests:
<INPUT TYPE=checkbox NAME="extracurriculars[]" VALUE="music "> choir/orchestra
<INPUT TYPE=checkbox NAME="extracurriculars[]" VALUE="sports "> sports
<INPUT TYPE=checkbox NAME="extracurriculars[]" VALUE="writing "> yearbook/newspaper

<fieldset>
<legend>Extracurricular interests:<legend><br>
<label><input type='checkbox' name='extracurriculars[]' value='music'> choir/orchestra</label>
.....
</fieldset>

Checkboxes should almost always be stacked vertically

Checkbox options:

  • name= variable name
  • The variable name should end with [] if you're (someday) going to use php to process the form.
  • value= value to be returned if this button is checked when the form is submitted
  • checked='checked' sets a button initially to the "checked" state

Text areas

Essay:
    If you were to be dropped off on a desert island for a week, describe the two non-survival objects you would take with you, and why.
If you were to be dropped off on a desert island for a week, describe the two non-survival objects you would take with you, and why.<BR>
<TEXTAREA WRAP=PHYSICAL ID="essay" ROWS=5 COLS=30> </TEXTAREA>

<label for='essay'>If you were....why.</label>
Textarea options:
  • set default text by putting it between <TEXTAREA> and </TEXTAREA>
  • name= variable name
  • value= initial text to put in the textarea
  • ROWS= COLS= size of textarea
  • WRAP=
    • OFF no word wrapping
    • VIRTUAL word wrapping when typing, but no returns are transmitted
    • PHYSICAL word wrapping when typing, and returns are transmitted as they appear on the input form

 

Submitting the form

<INPUT TYPE="submit" VALUE="SEND">
Options:
  • VALUE= is the text to display on the button
  • You can also submit a form with this: <INPUT TYPE="image" SRC="cute_picture.gif"> which will display a picture instead of the standard button with text

Really simple forms: Forms that consist of just one text box can be submitted when the user types the "return" key (no submit button needed).

Finishing a form

</FORM> 

Homework: Favorite Fruit

[Pretend that] You are a member of the Citrus Marketer's Association, and you're giving away cool citrus marketing loot to folks that fill out a brief survey on the web. Create a form visitors to your page can fill out...

Hand it in on Moodle.