The address for this web page is: http://fishcaro.crosswinds.net/day_21_more_on_forms.htm

On to the next lesson! Back to the COURSE SYLLABUS

21. MORE ON FORMS

If you need a break from studying forms, play a game of TETRIS! Here are the basic rules:

You earn points by completely filling a row with the falling blocks. Also, a completed row disappears.
The left/right arrow keys move the falling blocks left/right.
The uparrow key rotates the falling block counterclockwise.
The downarrow key causes the block to drop quickly.
Just close the window when you're done playing, and get back to work on studying forms!

Play Tetris! (the link I had here no longer works)

In this lesson, we'll talk about the "ACTION" and "METHOD" attributes for the "FORM" tag; these attributes describe what action should be taken when the form is submitted, and what method should be used to send the information that is collected in the form. We'll also begin talking about the "INPUT" tag, which is the tag that is used to collect input.

INDEX CARD #21:

"METHOD" and "ACTION" ATTRIBUTES (21a)

Here's the basic structure to create a form:

<FORM ACTION="URL_for_form_processing_program" METHOD=POST>

  code that describes what the form should look like
</FORM>

Note that <FORM> </FORM> is a container, and the stuff that goes inside the container describes what the form will look like. The <FORM> tag takes two attributes to make it work:
--The ACTION attribute asks: "When the form is submitted, what action should be taken?" Its value is the URL of the CGI program that will process the information collected in the form. (Put the URL inside quotation marks.)
--The METHOD attribute asks: "What method should be used to send the information to the form-processing program?" There are two possible values: GET and POST. POST is the preferred transfer method, according to the W3C. (When you write the form-processing program, it's important to know whether you're using GET or POST. Don't worry about it right now.)

INTRODUCTION TO THE INPUT TAG (21b)

Inside the <FORM> </FORM> container goes code that specifies what the form should look like. The most common decision you need to make when you're creating a form is: What type of input do you want? This is specified with the INPUT tag and its TYPE attribute:
<INPUT TYPE="type_of_info" more attributes go here> Here are three common types of inputs:
--text, used for things like names names and addresses (INPUT TYPE="text")
First name:
--checkboxes, used for multiple-choice questions (INPUT TYPE="checkbox"). Any number of items can be selected in checkboxes (all, none, some).
Which of these foods do you like? chocolate avacado couscous
--radio buttons, used to toggle between choices (INPUT TYPE="radio"). Only one radio button in a group can be selected; if no button is marked when the form is submitted, then the first button is selected by default.
Which color do you like best? green blue If you don't specify a type, then "text" is assumed.

Printable version of Index Card 21a

Printable version of Index Card 21b

WORKSHEET #21:

(W21.1) Experiment with the different input types shown above. In particular, how do the checkboxes differ from the radio buttons? VIEW the SOURCE CODE to see what was typed to create these form elements. Each type will be discussed in more detail in future lessons.
(W21.2) Please continue with the online tutorial located at: http://www.cwru.edu/help/interHTML/toc.html (link is no longer valid) Read Chapter 5 (Forms: INPUT, Part I) and do the exercises at the end of Chapter 5.

ASSIGNMENT #21:

(A21.1) Please read pages 236–238 (from "Form Elements" through "Radio Button") in the Weasel Book.