Favorite Ice Cream Survey

FORM example

Form tag has Action attribute whose attribute value is the name of the CGI program that will execute on the server when the form is submitted back to the server. We'll learn about that later in the course, ignore it now. Method attribute also has to do with CGI. Note that the form works the same in the browser without the Action and Method attributes. Form must have a end Form tag. Tags and Values are case-insensitive. In this page I show the HTML that produces the Form and its various elements. I use uppercase for tags and for required attributes, initial capital for optional attributes. For attribute values that are numbers or predefined meanings I don't double-quote them, but for attribute values of my own creation I do quote them (quoting is only obligatory when including spaces as part of a value).

<FORM Action="/cgi-bin/icecream_form.pl" Method=post>
This Action is at the same server this page came from. Normally with a form you have an Action atribute which has the URL of the CGI script that will be be run by the server when it gets the form's submitted data. However, with this example form page we won't have it submitted to a CGI script, so there won't be an Action.

A form can be submitted by email using the mailto Action:
<FORM Action="mailto:davidwills@hotmail.com" Method=post Enctype="text/plain">
The received email will be URL-encoded (i.e. messy looking).

If you don't want the form to be submitted to a CGI script you can leave the Action and Method attributes out of the Form tag.
<FORM>
Clicking the Submit button then resets the form.

Input, Select, and Textarea tags can only be inside a Form.
The Input tag is overloaded, it's used for Radio buttons, Checkboxes, Text, Submit button, Reset button, Button, and Hidden elements. Type is required attribute that distinguishes which kind of Input "widget". (Widget is jargon for a user input thingee.)
Name will be needed for CGI. Each widget should have a unique Name value.

What is your name?

<INPUT TYPE=text NAME="username" Size=30>
Size (number of characters wide) is optional, defaults to 40.

How many vernal equinoxes have there been since your birth?

<INPUT TYPE=text NAME="age" Size=2 Maxlength=2>
Maxlength allows user to enter no more than 2 characters.

A set of Radio buttons. Only one can be selected at a time (enforced by browser). Note they all have the same Name (that makes them a set). They look like:
<INPUT TYPE=radio NAME="freq" VALUE="daily">
Value is the value that gets submitted back to the server. It's usually different for each button. One Radio button could by default be checked by adding the attribute CHECKED.

How often do you eat this incredibly fattening substance?

Hourly
Daily
Weekly
Fortnightly
Monthly
Yearly
Never

A set of Checkboxes. Any number of them can be selected. Like a set of Radio buttons they will all have the same Name. A Checkbox can be checked by default if it has the CHECKED attribute. They look like:
<INPUT TYPE=checkbox NAME="emporia" VALUE="Baskin-Robbins">

What ice cream emporia do you patronize?

Baskin-Robbins
Blue Seal
Dairy Queen
A&W

A Select menu of Options. The Select tag looks like:
<SELECT NAME="vote">
The options look like:
<OPTION>Vanilla
Note that here the text Vanilla is not part of the tag. (Option does have a Value attribute though).

What is your favorite flavor of ice cream?

End Select tag is rquired: </SELECT>

To allow more than one Option to be selected, the Multiple attribute is needed:
<SELECT NAME="mags" Multiple>
To have an option be selected by default, add the Selected atrribute:
<OPTION Selected>Weight Watchers

Which ice cream journals do you subscribe to?

A Textarea tag. Rows and Cols are required attributes.
<TEXTAREA NAME="poem" ROWS=6 COLS=60>

Compose an ode to ice cream

End Textarea tag required: </TEXTAREA>

A Submit button. When clicked the form is submitted to its Action. Value is optional; without it the blurb on the button is 'Submit'.
<INPUT TYPE=submit Value="Submit the survey">

A Reset button. When clicked all the form elements (ie. widgets) are reset to their default values. Value is optional; without it the blurb on the button is 'Reset'.
<INPUT TYPE=reset Value="Clear your choices">

A "regular" button. When clicked nothing happens! We'll see that with Javascript we can make something happen though. Value is optional; without it there's no text on the button.
<INPUT TYPE=button Value="This is a button button">

Hidden element is used in some CGI applications to "remember state". We'll learn about its use later. Note that a hidden element displays nothing, it's hidden (but it's in the source).
<INPUT TYPE=hidden Name="myhiddenfield" Value="something meaningful in app">

The end Form tag is here.
</FORM>