The address for this web page is: http://fishcaro.crosswinds.net/day_22_inputs_for_forms.htm
On to the next lesson! Back to the COURSE SYLLABUS

22. INPUT TYPES FOR FORMS

In this lesson, we elaborate on the "text," "checkbox," and "radio" types for the INPUT tag. You will need 3 index cards (6 sides) for today's lesson.

All the input types discussed here go inside a FORM container. Be sure to give the form a name, like this:


<FORM NAME="name_of_form"> all the form contents </FORM>

INDEX CARDS #22:

THE "text" TYPE (22a)

The "text" type allows the user to enter a single word or a line of text. Here's the general structure:

<INPUT TYPE="text" NAME="name_of_item"
                   SIZE="width_of_textbox"
                   MAXLENGTH="max_length_of_entered_text"
                   VALUE="optional_starting_value">

Here's some sample code:

Please input your first name:

<INPUT TYPE="text" NAME="first_name" SIZE="10" MAXLENGTH="20"

 VALUE="Carol">

This sample code produces: Please input your first name:

ATTRIBUTES used with the "text" type (22b)

The NAME attribute is required. The information goes to the form-processing program in NAME=VALUE pairs. Don't use any spaces in your NAME; use underscores instead. In the example (if the user doesn't type in a different name) then the information would be sent as: first_name=Carol
The SIZE attribute is optional. This displays the width of the text box, in number of characters. Design tip: figure out how long an average entry will be, and make the text box this size.
The MAXLENGTH attribute is optional; the user will not be allowed to enter more characters than specified in this attribute. Design tip: determine the longest possible entry that someone might make, and use this for MAXLENGTH.
The VALUE attribute is optional. It is used to specify text that you want to appear when the form is loaded. This value can be changed by the user. Design tip: this is useful for illustrating the desired form of the response, or for putting a commonly-given response.

THE "checkbox" TYPE (22c)

The "checkbox" type is used for multiple-choice questions. It works best when more than one answer is allowed. Here's the general structure:

<INPUT TYPE="checkbox" NAME="name_of_group"
                       VALUE="required_ID_for_each_checkbox"
                       CHECKED>

Here's some sample code:

Which math courses have you taken?

<INPUT TYPE="checkbox" NAME="math" VALUE="alg" CHECKED> Algebra

<INPUT TYPE="checkbox" NAME="math" VALUE="geom" CHECKED> Geometry

<INPUT TYPE="checkbox" NAME="math" VALUE="calc"> Calculus

This sample code produces:

Which math courses have you taken? Algebra Geometry Calculus

ATTRIBUTES used with the "checkbox" type (22d)

The NAME attribute is required; it identifies the "group" of checkboxes. Don't use any spaces in your NAME; use underscores instead. In the example (if the user doesn't change any of the checkboxes) then the information would be sent to the form-processing program something like this: math=alg|geom
The VALUE attribute is required: if the associated item is checked, then this value gets sent to the form-processing program.
To make an option appear already checked, add the CHECKED attribute. Of course, the user can un-check the item if desired.

Sometimes, checkboxes are confusing: Which checkbox goes with which name? (This is particularly true if there are many choices, and the one you want is in the middle.) You can format differently to prevent this problem (although it takes up more space):

Algebra    
Geometry   
Calculus

THE "radio" TYPE (22e)

The "radio" type (a "radio button") is used to toggle between choices. It is used when you want exactly one item to be selected. Here's the general structure:

<INPUT TYPE="radio" NAME="name_of_group"
                    VALUE="required_ID_for_each_button"
                    CHECKED>

Here's some sample code:

Which flavor do you like best?

<INPUT TYPE="radio" NAME="flavor" VALUE="choc" CHECKED> chocolate

<INPUT TYPE="radio" NAME="flavor" VALUE="van"> vanilla

<INPUT TYPE="radio" NAME="flavor" VALUE="straw"> strawberry

This sample code produces:

Which flavor do you like best? chocolate vanilla strawberry

ATTRIBUTES used with the "radio" type (22f)

The NAME attribute is required; it identifies the "group" of radio buttons. Don't use any spaces in your NAME; use underscores instead. In the example (if the user doesn't change the selection) then the information would be sent to the form-processing program something like this: flavor=choc
If no button is checked when the form is loaded, and the user doesn't check a button before submitting the form, then the first button is selected, by default, and sent to the form-processing program.
The VALUE attribute is required: this is used to identify the selected button when the information is sent to the form-processing program.
To make an option appear already checked, add the CHECKED attribute. Of course, the user can change the selection if desired.

Printable version of Index Card 22a

Printable version of Index Card 22b

Printable version of Index Card 22c

Printable version of Index Card 22d

Printable version of Index Card 22e

Printable version of Index Card 22f

WORKSHEET #22:

(W22.1) Please continue the online tutorial located at: http://www.cwru.edu/help/interHTML/toc.html (link is no longer valid) Read Chapter 6 (Forms: INPUT, PART II) and do the exercises at the end of Chapter 6.

ASSIGNMENT #22:

(A22.1) Try out the text box in (22a). Is the width 10 characters? Try to enter more than 20 characters; what happens?
(A22.2) Try out the checkboxes in (22c). Can you have them ALL checked? NONE checked?
(A22.3) Try out the radio buttons in (22e). Can you have more than one box checked at a time? Is it possible to have NO items checked?