Writing forms (HW)

Writing forms

Readings

Chapter 17.

On the Web

Documentation for email.
Nielsen on correct use of check boxes and radio buttons.
A common form layout involves right-aligning the form element labels, and left-aligning the input boxes.

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.

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:

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

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]

Radio buttons

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:

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.<BR>
<TEXTAREA WRAP=PHYSICAL ID="essay" ROWS=5 COLS=30> </TEXTAREA>

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

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...

that uses the "email" script to package up the results and send them off via e-mail.
with space for their name (in a text box).
Have them indicate their favorite kind of citrus fruit among grapefruit, oranges, lemons, or other (use a set of radio buttons), and
select (from a drop-down menu) whether they want to submit the form to you or your instructor: This will result in setting the variable recipient to have your e-mail address as its value, or else 'paulmr@goshen.edu'.
Set the e-mail subject line (variable name is subject) with a hidden input field.

Hand it in on Moodle.